<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>分享</title> <style> body,div,span{ margin:0; padding:0; } .div{ background:red; width:200px; height:200px; position:relative; left:-200px; top:10px; } .a{ padding:2px; width:20px; height:50px; position:absolute; left:200px; top:20px; background:blue; color:white; text-decoration:none; } </style> <script> window.onload = function (){ var div = document.getElementById('div'); div.onmouseover = function (){ display(10,0); } div.onmouseout = function (){ display(-10,-200); } } var stop = null; function display(speed, targetLeft){ clearInterval(stop); var div = document.getElementById('div'); stop = setInterval(function(){ if(div.offsetLeft == targetLeft){ clearInterval(stop); } else{ div.style.left = div.offsetLeft + speed + 'px'; } }, 30); } </script> </head> <body> <div class="div" id="div"> <a href="#" class="a" id="a">分享</a> </div> </body> </html>
动画总结：写js函数时，如果两个函数差不多，可以把相同的地方提出来当参数穿进去。对于计时器要想到清空它。