js 分享 運動框架
阿新 • • 發佈：2017-05-09
tag width 速度 cti back script oct 分享 ear
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <style> #div1{ width:100px; height:200px; background:red; position:absolute; left:-100px } #span1{ width:20px; height:60px; background:blue; position:absolute; line-height:20px; top:70px; right:-20px; } </style> <script> window.onload=function(){ var odiv=document.getElementById(‘div1‘); odiv.onmouseover=function(){ onStart(0); } odiv.onmouseout=function(){ onStart(-100); } } vartimer=null; function onStart(oTag){ var odiv=document.getElementById(‘div1‘); clearInterval(timer); var speed=null; if(speed>oTag){ speed=-10; }else{ speed=10; } timer=setInterval(function (){ if(odiv.offsetLeft==oTag){ clearInterval(timer); }else{ odiv.style.left=odiv.offsetLeft+speed+‘px‘; } },30) } </script> </head> <body> <div id="div1"> <span id="span1">分享到</span> </div> </body> </html>
關於速度的小解釋
分享框
left30 tag300 正
left600 tag30 負
js 分享 運動框架