慕粉3673019
2018-09-14 16:27
window.onload = function(){ var li = document.getElementById('li1'); li.onmouseover = function(){ startMove(li,{'width':400,'height':200}) } li.onmouseout = function(){ startMove(li,{'width':200,'height':100}) } } //运动框架 startMove函数 function startMove(obj,json,fn){ clearInterval(obj.timer); var flag = true; //开启定时器 obj.timer = setInterval(function(){ //遍历json for (var attr in json) { var speed = 0; //取当前值 icur if (attr == 'opacity') { var icur = Math.round(parseFloat(getStyle(obj,attr))*100); }else{ var icur = parseInt(getStyle(obj,attr)); } //算速度:speed //目标值:json[attr] if (icur < json[attr]) { speed = Math.ceil((json[attr] - icur)/8); }else{ speed = Math.floor((json[attr] - icur)/8); } //检测停止 if (icur != json[attr]) { flag = false } if (attr == 'opacity') { obj.style.filter = 'alpha(opacity:'+icur+speed+')'; obj.style.opacity = (icur+speed)/100; }else{ obj.style[attr] = icur + speed + 'px'; } } //动画结束时,这里 flag 是怎么变成 true 的??????? if (flag) { clearInterval(obj.timer); if (fn) {fn()} } },30) }
视频中flag的声明位置应该是写错了,实际上应该是写在定时器内。
视频中为什么动画会停止?完全是因为speed归0了,动画停止了,但实际上定时器并没有停止,还在继续运行。
感谢 @纸丶两面白 同学!
JS动画效果
113920 学习 · 1450 问题
相似问题