刘颜
2016-10-30 19:48
<!DOCTYPE html> <html> <head> <title>Date TEST</title> <style> #div1{ left: 300px; width: 200px; height: 100px; position: relative; background-color: red; } #div1 span{ width: 20px; height: 50px; background: blue; position: absolute; left: 200px; top: 75px; } </style> </head> <body> <div id="div1">This is a div for testing animation</br> <span>TESTING</span> </div> </body> <script> window.onload = function(){ var oDiv = document.getElementById('div1'); oDiv.onmouseover = function(){ startMove(-10, 100); } } var timer = null; function startMove(speed, Target){ clearInterval(timer); var oDiv = document.getElementById('div1'); timer = setInterval(function(){ if(oDiv.offsetLeft === Target){ clearInterval(timer); } else { oDiv.style.left = oDiv.offsetLeft + speed + 'px'; } }, 30) } </script> </html>
负值是向左运动,向左不就是移出么
JS动画效果
113925 学习 · 1443 问题
相似问题