qq_慕移动0355785
2019-07-17 15:20
<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.onmousemove=function(){ startMove(10,0); } oDiv.onmouseout=function(){ startMove(-10,-200); } } var timer=null; function startMove(iTarget){ clearInterval(timer); var oDiv=document.getElementById('div1'); timer=setInterval(function(){ var speed=0; if(oDiv.offsetLeft>iTarget){ speed=-10; } else { speed=10; } if(oDiv.offsetLeft==iTarget){ clearInterval(timer); } else{ oDiv.style.left=oDiv.offsetLeft+speed+'px'; } },30) } </script> </head> <body> <div id="div1"><span id="share">分享</span></div> </body>
function startMove(iTarget)函数里你只有一个参数,但是调用的时候你传了两个 startMove(10,0);
改成只传目标值就可以了;
oDiv.onmousemove=function(){ startMove(0); } oDiv.onmouseout=function(){ startMove(-200); }
JS动画效果
113925 学习 · 1443 问题
相似问题