<!doctype html><html><head> <meta charset="UTF-8"> <title>Just a little Demo</title> <style> body,div,span{ margin:0; padding:0; }#div1{ width:200px; height:200px; background:red; position:relative; left:-200px; top:0; }#div1 span{ width:20px; height:50px; background:blue; position:absolute; left:200px; top:75px; } </style> <script> window.onload=function(){ var oDiv=document.getElementById('div1'); oDiv.onmouseover=function(){ startMove(); } oDiv.onmouseout=function(){ startMove1(); } } var timer=null; function startMove(){ var oDiv=document.getElementById('div1'); setInterval(function(){ if(oDiv.offsetLeft==0){ clearInterval(timer); } else{ oDiv.style.left=oDiv.offsetLeft+1+'px'; } },30) } function startMove1(){ var oDiv=document.getElementById('div1'); setInterval(function(){ if(oDiv.offsetLeft==-200){ clearInterval(timer); } else{ oDiv.style.left=oDiv.offsetLeft-1+'px'; } },30) } </script> </script></head><body> <div id="div1"> <span id="share">分享</sapn> </div> </div></body></html>
添加回答
举报
0/150
提交
取消