<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } #div{ width:200px; height:200px; background:red; position:relative; left:-200px; } #div span{ width:20px; height:50px; background:blue; position:absolute; left:200px; top:75px; color:white; padding-top:10px; } </style> <script> window.onload=function(){ var div=document.getElementById('div'); div.onmouseover=function(){ move(0); } div.onmouseout=function(){ move(-200); } } var div=document.getElementById('div'); var timer; function move(iTarget){ clearInterval(timer); timer=setInterval(function(){ var speed = (iTarget-div.offsetLeft)/20; speed = speed>0?math.ceil(speed):math.floor(speed); if(div.offsetLeft==iTarget){ clearInterval(timer); }else{ div.style.left=div.offsetLeft+speed+'px'; } },30); } </script> </head> <body> <div id="div"> <span id="share">分享</span> </div> </body> </html>
1,var div=document.getElementById('div'); 放在move函数里面
2,math改成大写 Math
<script> window.onload=function(){ var div=document.getElementById('div'); div.onmouseover=function(){ move(0); } div.onmouseout=function(){ move(-200); } } var timer; function move(iTarget){ var div=document.getElementById('div'); clearInterval(timer); timer=setInterval(function(){ var speed = (iTarget-div.offsetLeft)/20; speed = speed >0 ? Math.ceil(speed):Math.floor(speed); if(div.offsetLeft==iTarget){ clearInterval(timer); }else{ div.style.left=div.offsetLeft+speed+'px'; } },30); } </script>
div.onmouseover=function(){
move(this,0);
}
function move(obj,iTarget){
var div=document.getElementById('div');
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed = (iTarget-div.offsetLeft)/20;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(div.offsetLeft==iTarget){
clearInterval(timer);
}else{
div.style.left=div.offsetLeft+speed+'px';
}
},30);
}
div变量放在里边,math写错了