This article illustrates how JavaScript implements the Click button to move the div layer flexibly. Share to everyone for your reference. The implementation methods are as follows:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Click button to let div layer flex move effect </title>
<style type= "Text/css" >
#div1 {background: #FFCC66; border: #FF6600 1px solid; height:100px; width:100px; position:relative; left:0px;}
</style>
<script type= "Text/javascript" >
var t=null;
function Startmove ()
{
if (t)
{
Clearinterval (t);
}
T=setinterval (move, 30);
}
var step=0;
function Move ()
{
var Odiv=document.getelementbyid ("Div1");
step+= (100-odiv.offsetleft)/50;
step=step*0.98
Odiv.style.left=odiv.offsetleft+step;
}
</script>
<body>
<div id= "Div1" >
</div>
<input type= "button" value= "mobile" onclick= "Startmove ()"/>
</body>
I hope this article will help you with your JavaScript programming.