雪神仙
2016-08-06 16:01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>more</title>
<style type="text/css">
ul ,li{
list-style: none;
}
ul li{
width:200px;
height: 100px;
background: yellow;
margin-bottom: 20px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var Ali=document.getElementsByTagName("li");
for(var i=0;i<Ali.length;i++){
Ali[i].onmouseover=function(){
startMove(this,500);
}
Ali[i].onmouseout=function(){
startMove(this,10);
}
}
}
var timer=null;
function startMove(obj,iTarget){
clearInterval(timer);
timer=setInterval(function(){
var speed=(iTarget-obj.offsetwidth)/10;
if(speed=speed>0){ Math.ceil(speed)}
else{
Math.floor(speed);}
if(obj.offsetwidth=iTarget){
clearInterval(timer);
}
else{
obj.style.width=obj.offsetwidth+speed+'px';
}
},30)
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
offsetwidth写错了,应该是offsetWidth;
if(speed=speed>0){ //这里不太懂为什么要赋值,我改成了(speed>0)
Math.ceil(speed) //这里要赋值,不然计算了也没有用到。改成speed=Math.ceil(speed);
}
else{
Math.floor(speed); //改成speed=Math.floor(speed);
}
if(obj.offsetwidth=iTarget){ //这里应该是obj.offsetwidth==iTarget,而不是赋值噢
clearInterval(timer);
} else{
obj.style.width=obj.offsetwidth+speed+'px'; }
改了这些地方之后应该就能动了,虽然还有一些BUG,共用了定时器神马的,我也还没消化好。。就只能帮到这里了恩:)
<script type="text/javascript"> window.onload=function(){ var oLi = document.getElementsByTagName("li"); for(var i=0;i<oLi.length;i++){ oLi[i].timer=null; //给每一个li的onmouseover事件设置一个定时器 oLi[i].onmouseover=function(){ startMove(this,500); }; oLi[i].onmouseout=function(){ startMove(this,10); }; } } function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed=(iTarget-obj.offsetWidth)/10; //offsetWidth拼错了,要用驼峰法。 speed=speed>0 ? Math.ceil(speed) : Math.floor(speed);//你原来这里的if else语句写错了,我给你改成了三元表达式。实现的作用和楼上那位同学是一样的,你原来的代码你可以自己去alert(speed),是一个布尔值。 if(obj.offsetWidth==iTarget){ //if 语句的判断错了。 clearInterval(obj.timer); } else{ obj.style.width=obj.offsetWidth+speed+'px'; } },30) } </script> 具体的错误其实我楼上那位同学都给你指出来了,你可以对照我的代码印证一下
JS动画效果
113923 学习 · 1443 问题
相似问题