为了账号安全,请及时绑定邮箱和手机立即绑定

JS动画效果

vivian Web前端工程师
难度初级
时长 2小时 8分
学习人数
综合评分9.60
537人评价 查看评价
9.8 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • 运动框架思路
    查看全部
  • 运动框架
    查看全部
  • //运动框架 function startMove(obj,json,fn){ var flag = true; clearInterval(obj.timer); obj.timer = setInterval(function(){ for (attr in json){ if( attr == 'opacity'){ var iCur = Math.round(parseFloat(getStyle(obj,attr))*100); }else{ var iCur = parseInt(getStyle(obj,attr)); } var iSpeed = (json[attr] - iCur)/8; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); alert(iSpeed); if( iCur != json[attr] ){ flag = false; } if(attr == 'opacity'){ iCur += iSpeed; obj.style.filter = "alpha(opacity:"+ iCur+")"; obj.style.opacity = iCur / 100; }else{ iCur += iSpeed; obj.style[attr] = iCur + 'px'; } } if(flag == true){ clearInterval(obj.timer); fn && fn(); } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }
    查看全部
    0 采集 收起 来源:JS动画案例

    2018-03-22

  • 事实上对于javascript这样的弱类型语言,使用var和不使用var都可以定义一个变量,在函数内使用var定义的变量是一个局部变量,不使用var定义的变量是一个全局变量,而obj.timer = setInterval这种方式算不上定义,这里obj已经是一个对象了,obj.timer代表为这个对象创建一个属性,然后才能使用这个属性,我们可以为它创建很多属性,根据需要来。ps:大多时候我们想自定义一个对象,可以这样写:var myobj1 = Object();然后为你的对象添加属性,如myobj.number=2016等等,还可以用另外一种方法定义对象,如:var myobj2 = {name:"Joh",number:"146"};这对话括号里的name和number就是对象myobj2的属性"Joh","146"就是值,而且值可以是任何数据类型,用得较多的就是函数了。如果你想了解更多,就去看看《DOM编程艺术》这本书。
    查看全部
  • 获取样式的函数。 ie:currentStyle[att]; FF:getComputedStyle(obj,false)[att];
    查看全部
    0 采集 收起 来源:获取样式

    2016-07-18

  • 记得启动运动定时器之前要先清除定时器
    查看全部
    0 采集 收起 来源:JS速度动画

    2016-07-17

  • JSON 支持同时运动,格式var json={name:value}不同对之间用,链接
    查看全部
    0 采集 收起 来源:JS动画案例

    2016-07-17

  • 获取样式的函数
    查看全部
    0 采集 收起 来源:获取样式

    2016-07-16

  • 多物体动画数据不能共用
    查看全部
    0 采集 收起 来源:JS多物体动画

    2016-07-16

  • JS动画效果: 运动框架实现思路: 1.速度(改变值left,right,width,height,opacity) 2.缓冲运动 3.多物体运动 4.任意值变化 5.链式运动 6.同时运动
    查看全部
  • speed=speed>0?Math.ceil(speed):Math.floor(speed); 遇到变速缓冲运动时要注意取整
    查看全部
    0 采集 收起 来源:JS缓冲动画

    2018-03-22

  • JS动画效果: 运动框架实现思路: 1.速度(改变值left,right,width,height,opacity) 2.缓冲运动 3.多物体运动 4.任意值变化 5.链式运动 6.同时运动
    查看全部
  • 照着老师的代码打,发现有个问题,就是flag没有定义在定时器内。因为flag如果定义在定期器外,flag只执行了一遍,当循环了一次后,flag变成了false就不会再改变了。flag一直都是false,就无法关闭定时器和执行下一个函数了。 结论:flag要定义在定期器内(旗子要立好!!)求赞! 时间: 2016-04-04
    查看全部
  • 1、JS动画效果: 运动框架实现思路: ①速度(改变值left,right,width,height,opacity) ②缓冲运动:不是匀速 ③多物体运动 ④任意值变化 ⑤链式运动:如:先变宽度,再变高度 ⑥同时运动
    查看全部
  • 30ms
    查看全部
    0 采集 收起 来源:JS多物体动画

    2016-07-12

举报

0/150
提交
取消
课程须知
1.您至少已经具备JavaSript的知识。2.您已经具备一些开发经验。
老师告诉你能学到什么?
1.使用定时器实现简单动画。2.如何一步步封装库。2.培养编程的思想。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!