<!DOCTYPE html><charset="UTF-8"><html><head> <title>yundong</title> <style> body,div,span{ margin: 0; padding: 0; } #div1{ height: 200px; width: 200px; position: relative; top: 0; left: -200px; background-color:red; opacity: 0.7; } #share{ height: 50x; width: 20px; position: absolute; left: 200px; top: 75px; background-color:blue; opacity: 0.9; } </style></head><body><div id="div1"> <span id="share">分享</span></div><script type="text/javascript"> window.onload=function(){ var oDIV=document.getElementById("div1"); oDIV.onmouseover=function(){ onMove(); } oDIV.onmouseout=function(){ stopMove(); } } function onMove(){ clearInterval(timer); var oDIV=document.getElementById("div1"); var timer=null; timer=setInterval(function(){ if (oDIV.offsetLeft==0) { clearInterval(timer); } else{ oDIV.style.left=oDIV.offsetLeft+10+"px"; } },30) } function stopMove(){ clearInterval(timer); var oDIV=document.getElementById("div1"); var timer=null; timer=setInterval(function(){ if (oDIV.offsetLeft==-200) { clearInterval(timer); } else{ oDIV.style.left=oDIV.offsetLeft-10+"px"; } },30) }</script></body></html>
添加回答
举报
0/150
提交
取消