滑鼠點選展開, 移出滑鼠收縮
阿新 • • 發佈:2018-12-23
//滑鼠點選展開, 移出滑鼠收縮 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'); //清除定時器 clearInterval(timer); var iSpeed = 0; //計算速度 if (oDiv.offsetLeft < iTarget) { iSpeed = 10; } else { iSpeed = -10; }; timer = setInterval(function() { if (oDiv.offsetLeft == iTarget) { clearInterval(timer); } else { oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px'; } }, 30) }; <body> <div id="div1"> <span>分享到</span> </div> </body> #div1 { width: 100px; height: 200px; background: #ccc; position: absolute; left: -100px; } #div1 span { width: 20px; height: 60px; line-height: 20px; text-align: center; left: 100px; top: 70px; background: yellow; position: absolute; }