最新回答 / MarvelYao
clearInterval(timer),应该是obj.timer调试看看动画过程是否正确取值和设置值flag在里面的时候,外面的判断取不到flag的值,obj.timer关不掉。效果看起来当然一样,跟第一问差不多。
2017-11-17
function startMove(obj,goal){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=(goal-obj.offsetWidth)/8
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if (goal==obj.offsetWidth) {
clearInterval(obj.timer);}
else{obj.style.width=obj.offsetWidth+speed+'px';}
},30)}
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=(goal-obj.offsetWidth)/8
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if (goal==obj.offsetWidth) {
clearInterval(obj.timer);}
else{obj.style.width=obj.offsetWidth+speed+'px';}
},30)}
2017-11-13
window.onload=function(){
var Oli=document.getElementsByTagName("li");
for (var i = 0; i < Oli.length; i++) {
Oli[i].timer=null;
Oli[i].onmouseover=function(){
startMove(this,400);
}
Oli[i].onmouseout=function(){
startMove(this,200);
}
}
}
var Oli=document.getElementsByTagName("li");
for (var i = 0; i < Oli.length; i++) {
Oli[i].timer=null;
Oli[i].onmouseover=function(){
startMove(this,400);
}
Oli[i].onmouseout=function(){
startMove(this,200);
}
}
}
2017-11-13
<style type="text/css">
*{ margin: 0; padding: 0; list-style: none; }
ul li{ background: #7abcf2; width: 200px; height: 80px; margin: 15px; }
</style>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
*{ margin: 0; padding: 0; list-style: none; }
ul li{ background: #7abcf2; width: 200px; height: 80px; margin: 15px; }
</style>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
2017-11-13