班大人
2015-05-30 18:03
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #div1 {width: 200px; height: 200px; background: red; position: relative; left: -200px; top: 0px;} #div1 span {width: 20px; height: 42px; background: blue; display: block; position: absolute; left: 200px; top: 60px; color: #fff; font-size: 14px; text-align: center; padding-top: 10px;} </style> <script> window.onload=function(){ var oDiv = document.getElementById('div1') oDiv.onmouseover = function(){ startMove(); } } var timer = null; function startMove(){ var oDiv = document.getElementById('div1') timer = setInterval(function(){ if(oDiv.offsetLeft==0){ clearInterval(timer); } else{ oDiv.style.left = oDiv.offsetLeft+10+'px'; } },30) } </script> </head> <body> <div id="div1"> <span id="share">分享</span> </div> </body> </html>
首先,你的JS这种写法很不好
startMove()里最好传个obj参数
if里的==改成>=
兄弟,很多地方你漏了分号。。。
JS动画效果
113924 学习 · 1443 问题
相似问题