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

JS动画效果

vivian Web前端工程师
难度初级
时长 2小时 8分
学习人数
综合评分9.60
537人评价 查看评价
9.8 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • window.load = function(){}; windo我对象的各种属性;
    查看全部
    0 采集 收起 来源:获取样式

    2016-11-06

  • 多物体运动时争抢资源的问题: 设置资源数组,为每一个物体分配一个相关资源; 如为每个物体都设置定时器或者都设置初始透明度等; aLi[i].timer = null;aLi[i].onmouseover = function(){startMove(this,400)} function startMove(obj,iTarget){ ....... clearInterval(obj.timer); obj.timer = setInterval(function(){.....},30); } 为一组对象添加某种属性;aLi[i].index=null;ali[i].timer=null;aLi[i].onmouseover=function(){} oDiv[i].alpha = 30;
    查看全部
    0 采集 收起 来源:JS多物体动画

    2016-11-06

  • Math.floor()向取整; Math.ceil()向上取整; Math.round()四舍五入; var speed = speed>0?Math.ceil(speed):Math.floor(speed);
    查看全部
    0 采集 收起 来源:JS缓冲动画

    2018-03-22

  • 缓冲动画的实现; 速度大小如何确定:speed 目标值前去当前值;差值越大速度越快,否则越小。以此实现缓冲效果。
    查看全部
    0 采集 收起 来源:JS缓冲动画

    2016-11-06

  • 动画中改变速度的方向问题:speed 根据当前值和目标值的大小来判断; current<target 从左到右,speed正值; current>target 从右到左,speed负值;
    查看全部
    0 采集 收起 来源:JS透明度动画

    2018-03-22

  • 25帧/s产生动画视觉 定时器事件设置为小于4ms就可以了。
    查看全部
    0 采集 收起 来源:JS速度动画

    2016-11-05

  • 执行定时器前,先在处理函数中关闭定时器,防止处理函数在执行过程中同时执行多个定时器。
    查看全部
    0 采集 收起 来源:JS速度动画

    2016-11-05

  • 运动框架实现思路: 1 速速(改变值left、right、width、height、opacity): 2 缓冲运动; 3 多物体运动; 4 任意值变化; 5 链式运动; 6 同时运动;
    查看全部
  • 使用回调函数实现链式动画
    查看全部
    0 采集 收起 来源:JS链式动画

    2016-11-05

  • 获取外联样式表和内部样式表: function getStyle(obj,attr) { return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr]; }
    查看全部
  • <script type="text/javascript" src="js/jquery.min.js"></script> <script> $(function(){ $('#move a').mouseenter(function(){ $(this).find('img').animate({top:'-30px',opacity:'0'},300,function(){ $(this).css({top:'30px'}); $(this).animate({top:'25px',opacity:'1'},200) }) }) }) </script>
    查看全部
    0 采集 收起 来源:jQuery动画案例

    2018-03-22

  • <script> window.onload=function(){ var aList=document.getElementsByTagName('a'); for(var i=0;i<aList.length;i++){ aList[i].onmouseenter=function(){ var _this=this.getElementsByTagName('i')[0]; move(_this,{top:-30,opacity:0},function(){//注意top后面不要带px _this.style.top=30+'px';//为了图标回来的时候是从下面回来 move(_this,{top:25,opacity:100}) }) } } } </script>
    查看全部
    0 采集 收起 来源:JS动画案例

    2018-03-22

  • 这章其实有个BUG,代码应该和我一样,才行 if(iCur!=json[attr]){ flag=false; if(attr=='opacity'){ obj.style.filter=.......; obj,style.opacity=......; }else{ obj.style[attr]=....... } } 应当把这个if()else()包裹在if(iCur!=json[attr]){}这个循坏里面
    查看全部
  • for 循环里面闭包所以只有当前那个
    查看全部
    0 采集 收起 来源:JS动画案例

    2016-10-31

举报

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

微信扫码,参与3人拼团

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

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