完美运动框架，不能实现链式运动哇！
来源：6-2 完美运动框架
me_is_hero
2015-03-19 10:38
按照这个方式写下来，同时运动是实现了，可是链式运动做不了哇。。求解！难道要用两套不一样的吗？
写回答
关注
8回答
-
- 林青石
- 2015-08-26 19:48:29
function startMove(obj,json,fnEnd){ clearInterval(obj.timer); obj.timer = setInterval(function(){ doMove(obj,json,fnEnd); },30); } function doMove(obj,json,fnEnd){ var iCur = 0; var attr = null; var bStop = true; for(attr in json){ if(attr=='opacity'){ //if(parseInt(100*getStyle(obj,attr))==0){ //iCur = parseInt(100*getStyle(obj,attr)); //} iCur=Math.round(parseFloat(getStyle(obj,attr))*100); //else{ //iCur = parseInt(100*getStyle(obj,attr)) || 100; //} } else{ iCur = parseInt(getStyle(obj,attr)) || 0; } var iSpeed = (json[attr] - iCur)/5; iSpeed = (iSpeed>0) ? Math.ceil(iSpeed) : Math.floor(iSpeed); if(json[attr]!=iCur){ bStop = false; } if(attr=='opacity'){ obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')'; obj.style.opacity = (iCur + iSpeed)/100; } else{ obj.style[attr] = iCur + iSpeed + 'px'; } } if(bStop){ clearInterval(obj.timer); if(fnEnd){ fnEnd.call(obj); } } } function stopMove(obj){ clearInterval(obj.timer); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj)[attr]; } } -
- 韩小亖
- 2015-07-22 00:49:36
你把startMove(oDiv,{width:301,top:100,opacity:100}中的width变大一点，比如400，就可以了。感觉是width变化时间太短导致的
-
- 林青石
- 2015-07-11 14:44:37
不对应该这么写 就没事了
if (icon==json[attr])
{
flag=true;
}else{
flag=false;
} -
- 林青石
- 2015-07-11 14:39:14
我本以为我解决了问题 不过又出来一堆问题 大家多交流解决吧
-
- 林青石
- 2015-07-11 14:27:01
是这老师不够严谨 还是怎么 他是不是漏了点代码
if (icon!=json[attr])
{
flag=false;
}else{
flag=true;
}else语句没写导致flag无法获得true值 以致整个if(flag)都没执行，你们的链式运动GG了
-
- 七月小麦麦
- 2015-06-17 23:56:12
我也是这样的，怎么回事？代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>运动框架最终版</title> <script type="text/javascript" src="move.js"></script> <style type="text/css"> *{margin:0;padding:0;} div{margin:0 auto;width:300px;height:200px;border:4px solid #FF0;background:#000;filter:alpha(opacity:30);opacity:0.3;position:relative;top:0;} </style> <script type="text/javascript"> window.onload=function () { var oDiv=document.getElementById("box"); oDiv.onmouseover=function () { startMove(oDiv,{width:301,top:100,opacity:100},function () { alert(1) }); } oDiv.onmouseout=function () { startMove(oDiv,{width:300,top:0,opacity:30}); } } //获取样式 function getStyle (obj,attr) { if (obj.currentStyle) { return obj.currentStyle.attr; } else{ return getComputedStyle(obj,false)[attr]; }; } //运动函数 function startMove (obj,json,fn) { var flag=true; //假设所有运动都达到了目标值 clearInterval(obj.timer); obj.timer=setInterval(function(){ //遍历json中的值 for(var attr in json){ //计算速度 var iCur=parseInt(getStyle(obj,attr)) if (attr=="opacity") { iCur=Math.round(parseFloat(getStyle(obj,attr))*100); } speed=(json[attr]-iCur)/20; speed=speed<0?Math.floor(speed):Math.ceil(speed) //判断所有属性是否达到目标值 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"; }; //判断所有属性是否达到目标值 if (flag) { clearInterval(obj.timer); //判断是否有需要执行的下一个函数 if (fn) { fn(); } } } },30) } </script> </head> <body> <div id="box"></div> </body> </html> -
- 丿丫丫
- 2015-04-11 19:15:24
如果传入的是this关键字 就要注意this在这里指向谁
-
- 丿丫丫
- 2015-04-11 18:37:10
代码贴出来，不可能实现不了。。。可能是写错了把
JS动画效果
通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装
113910 学习 · 1502 问题
相似问题