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

JS动画效果

vivian Web前端工程师
难度初级
时长 2小时 8分
学习人数
综合评分9.60
537人评价 查看评价
9.8 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • 运动框架实现思路
    查看全部
  • 听不懂,对我来说,没有接处过,太难了。
    查看全部
    0 采集 收起 来源:JS速度动画

    2014-10-07

  • //获取内部样式 function getStyle(obj,attr){ if(obj.currentStyle){//针对IE浏览器 return obj.currentStyle[attr]; }else{//针对firefox浏览器 return getComputerStyle(obj,false)[atrr]; } }
    查看全部
    0 采集 收起 来源:获取样式

    2014-10-12

  • 获取元素的left值,在元素没有边框的情况下用offsetLeft比较好,因为获取的值为数字,可以直接加减,如果用obj.style.left的话获取的结果为字符串,还要用parseInt()转换成整数。
    查看全部
    0 采集 收起 来源:JS缓冲动画

    2014-11-18

  • 缓冲运动的速度值一定要转换成整数,不然将到达不了终点,是用Math.ceil(),还是Math.floor(),要看就提情况。
    查看全部
    0 采集 收起 来源:JS缓冲动画

    2014-12-04

  • 透明度兼容写法:见截图。
    查看全部
    0 采集 收起 来源:JS透明度动画

    2014-11-29

  • 为防止动画累加,在每次触发动画事件时,应该先清除前一个没有完成的动画,即清除钱一池开启的定时器,然后这次再开启一个定时器。
    查看全部
    0 采集 收起 来源:JS速度动画

    2014-11-29

  • 以json对象的形式传参
    查看全部
  • getComputedStyle:用于Firefox、Chrome、Safari、Opera等浏览器,作用与currentStyle相同。 currentStyle 指浏览器当前显示的,如果用runtimeStyle 写入新样式,那么这个新样式权重最高,currentStyle的值亦改为新样式,所以可以说currentStyle是style 和 runtimeStyle 的结合。即运行时就是runtimeStyle ,否则就style 或currentStyle 。
    查看全部
  • style:标准的样式!可用来查询由html标签的style属性指定的样式。 currentStyle:可用来查询/修改外联或者内部样式表中的样式(仅IE、Opera)。 代表了在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式。当使用currentStyle做条件判断是,要加上body,document.body.currentStyle,这样才能兼容上IE6,7。 runtimeStyle: 运行时的样式!如果与style的属性重叠,将覆盖style的属性。代表了居于全局样式表、内嵌样式和 HTML 标签属性指定的格式和样式之上的对象的格式和样式。
    查看全部
  • 获取内部样式: function getStyle(obj,attr){ //curentStyle针对IE浏览器 if(obj.currentStyle){ return obj.currentStyle[attr]; } //getComputedStyle针对firefox浏览器 else{ return getComputedStyle(obj,false)[attr]; } }
    查看全部
    0 采集 收起 来源:获取样式

    2014-09-26

  • //缓冲系数10 var speed = (iTarget-oDiv.offsetLeft)/10; //如果速度是正的 则向上取整。速度是负的向下取整 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    查看全部
    2 采集 收起 来源:JS缓冲动画

    2018-03-22

  • 改写的 //多物体多运动模式 function startmove_4(obj, width, opacity){ //清除每个元素自己的定时器 clearInterval(obj.timer); //如果opacity没有传入 默认设置为100 if (!opacity) {opacity = 100}; obj.timer = setInterval(function(){ //定义速度,其中包括宽度变化的速度和透明度变化的速度 var speed = {width:null,opacity:null};
    查看全部
    0 采集 收起 来源:JS多物体动画

    2014-09-23

  • /*如果速度没有取整, 往左移动卡在-196.4px就停止移动了,因为oDiv.style.left的值为-196.4px,offsetLeft得到的值是整数而且总是-196,而speed的值总是0.4,*/
    查看全部
    1 采集 收起 来源:JS缓冲动画

    2014-09-23

  • var speed = (iTarget-oDiv.offsetLeft)/10; //如果速度是正的 则向上取整。速度是负的向下取整 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    查看全部
    0 采集 收起 来源:JS缓冲动画

    2018-03-22

举报

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

微信扫码,参与3人拼团

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

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