1.分享到
通过目标值来确定方向!
<style> #div1{width: 100px;height: 200px;position: absolute;left: -100px;background-color: gray;} #div1 span{width: 20px;height: 60px;line-height: 20px;text-align:center;left: 100px;top: 70px; background-color: yellow;position: absolute;} </style> <script> window.onload = function(){ var oDiv = document.getElementById(‘div1‘); oDiv.onmouseover = function(){ startMove(0); } oDiv.onmouseout = function(){ startMove(-100); } } var timer = null; function startMove(iTarget){ var oDiv = document.getElementById(‘div1‘); var iSpeed = 10 ; oDiv.offsetLeft < iTarget ? iSpeed = 10 : iSpeed = -10; clearInterval(timer); timer = setInterval(function(){ if(oDiv.offsetLeft == iTarget){ clearInterval(timer); }else{ oDiv.style.left = oDiv.offsetLeft + iSpeed + ‘px‘; } },30); } </script> </head> <body> <div id="div1"> <span>分享到</span> </div> </body>
时间: 2024-10-12 11:42:11