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

JS动画效果

vivian Web前端工程师
难度初级
时长 2小时 8分
学习人数
综合评分9.60
537人评价 查看评价
9.8 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • 多物体不能共用一个值,会造成混乱!
    查看全部
    0 采集 收起 来源:JS多物体动画

    2016-11-23

  • 运动模式: 1. 速度 => 改变left、right、width、height、opacity 2. 缓冲运动 3. 多物体运动 4. 任意值变化 5. 链式运动 6. 同时运动
    查看全部
  • 取整原因:因为有除法,当offsetLeft值变的越来越小时,最后相除会使speed变成小数,从而offsetLeft与speed相加会有小数,又因显示器的最小像素单位是1px,所以浏览器默认向下取整(变小,即floor),将小数省略,小数省略后,最终的值会变小,从而导致程序无法进入if判断,进入死循环。 这一点可以用console.log(speed)可以验证,speed的log会一直输出,因为程序死循环了。 所以,需要ceil or floor来解决这个问题,让程序进入if的判断,终止循环
    查看全部
    0 采集 收起 来源:JS缓冲动画

    2016-11-23

  • IE浏览器 filter:alpha(opacity:30); 火狐浏览器:opacity:0.3;
    查看全部
  • function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }
    查看全部
    0 采集 收起 来源:获取样式

    2016-11-22

  • currentStyle Ie浏览器获取样式 getComputedStyle 火狐浏览器获取样式
    查看全部
    0 采集 收起 来源:获取样式

    2016-11-22

  • li[i].timer
    查看全部
    0 采集 收起 来源:JS多物体动画

    2016-11-22

  • Math.ceil();向上取整 Math.floor();向下取整
    查看全部
    0 采集 收起 来源:JS缓冲动画

    2016-11-22

  • filter:alpha(opacity:0.3)
    查看全部
    0 采集 收起 来源:JS透明度动画

    2016-11-22

  • function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }
    查看全部
    0 采集 收起 来源:获取样式

    2016-11-22

  • <script> $(function(){ $("#move a").mouseenter(function(){ $(this).find('i').animate({top:"-25x",opacity:"0"},300,function(){ $(this).css({top:"30px"}); $(this).animate({top:"20px",opacity:"1"},200) }) }) }) </script>
    查看全部
    1 采集 收起 来源:jQuery动画案例

    2018-03-22

  • window.load = function(){ var oMove = document.getElementById("move"); var aList = document.getElementByTagName("a"); for(var i=0;i<aList.length;i++){ aList.onmouseover = function(){ var _this = this.getElementByTagName("i")[0]; startMove(_this,{top:-25,opacity:0},function(){ _this.top = 30 + "px"; startMove(_this,{top:20,opacity:100}); }); } } }
    查看全部
    0 采集 收起 来源:JS动画案例

    2018-03-22

  • 由于计算机不能很精确的存储浮点数,使用parseFloat时,有时会出现一堆小数。 解决:Math.round()四舍五入
    查看全部
  • css有三种样式:1.内联样式,2.嵌入样式,3.外部样式. 在js中,获取这样三种样式的方法是有限制的,style只能获取元素的内联样式,嵌入样式和外部样式使用style是获取不到的,js提供了另外的获取方式,嵌入样式和外部样式可以通过currentStyle(IE浏览器),getComputedStyle(Firefox,opera,safari,chrome浏览器)的方式获取.使用方法:window.currentStyle[attr]和window.getComputedStyle(obj,false)[attr];
    查看全部
    1 采集 收起 来源:获取样式

    2016-11-21

  • 多物体运动争抢资源问题 如果设置了一个公用的资源,多物体事件会争抢,如设置了一个公共定时器,都触发了就会抢夺,产生混乱,所以最好为每个物体设置定时器后者设置初始透明度 aLi[i].timer = null;aLi[i].alpha = 30;等等
    查看全部
    2 采集 收起 来源:JS多物体动画

    2016-11-21

举报

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

微信扫码,参与3人拼团

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

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