js运动框架之侧边框
2017-03-15 09:56
351 查看
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #div1 {width:150px;height:200px;background:blue;left:-150px;top:100px;position:absolute;} #div1 span{width:25px;height:50px;position:absolute;left:150px;top:75px;background:yellow;line-height:25x;} </style> <script> window. () { var oDiv=document.getElementById('div1'); oDiv. () { startMove(0); }; oDiv. () { startMove(-150); }; }; var timer=null; function startMove(n1) { var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function () { var speed=0; //判断变框所处位置相对于目标位置,从而赋值速度大小 if(oDiv.offsetLeft>n1) { speed=-10; } else { speed=10; } if(oDiv.offsetLeft==n1) { clearInterval(timer); } else { oDiv.style.left=oDiv.offsetLeft+speed+'px'; } },30); }; </script> </head> <body> <div id="div1"> <span>分享</span> </div> </body> </html>