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

JS动画效果

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

    2016-10-31

  • 运动框架思路
    查看全部
  • 1.速度(改变值left, right, width, height, opacity) 2.缓冲运动 3.多物体运动 4.任意值变化 5.链式运动 6.同时运动
    查看全部
  • getStyle
    查看全部
    0 采集 收起 来源:获取样式

    2016-10-28

  • 往右走向上取整为0(不向上取整left 为负值),往左边走就是向下取整为-200(不向下取整也是-195左右)
    查看全部
    0 采集 收起 来源:JS缓冲动画

    2016-10-27

  • 定义了一个变量为30的数值(因为没有oDiv.alpha这个属性),所以判断和目标值的比较大小
    查看全部
    0 采集 收起 来源:JS透明度动画

    2016-10-27

  • 功能相同,参数传的越少越好! 当left 的值 < 0 的时候,speed 应该是 +10;(往右移动) 当left 的值 > -200 的时候,speed 应该是 -10;(往左移动)
    查看全部
    0 采集 收起 来源:JS速度动画

    2018-03-22

  • 鼠标移入和移出可以通过参数的形势达到效果,而不用写大体上相同的两份代码
    查看全部
    0 采集 收起 来源:JS速度动画

    2016-10-27

  • 运动框架思路:1、速度 2、缓冲运动 3、多物体运动 4、任意值变化 5、链式运动 6、同时运动
    查看全部
  • oDiv.onmouseover = startMove(); 为什么不能这样调用呢?
    查看全部
    0 采集 收起 来源:JS速度动画

    2016-10-26

  • currentStyle 针对ie getComputedStyle firefox
    查看全部
    0 采集 收起 来源:获取样式

    2016-10-26

  • 1.过程:obj.stlye.width是样式中的块width;而obj.offsetWidth是显示的width(包括border之类的),故obj.style.width=obj.offsetWidth-1=obj.style.width+borderWidth-1,当borderWidth>1时,其实这是在加宽度而不是减宽度; 2.原型为parseInt ( String s , [ int radix ] ),用于解析一个字符串,并返回一个整数。还有parseFloat,则解析一个字符串,返回一个浮点数; 3.用js的style属性可以获得html标签的样式,但是不能获取非行间样式。即: 用document.getElementById(‘element').style.xxx可以获取元素的样式信息,可是它获取的只是DOM元素style属性里的样式规则,对于通过class属性引用的外部样式表,就拿不到我们要的信息了。所以js用currentStyle和getComputedStyle获取css的非行间样式; 3.var style = window.getComputedStyle("元素", "伪类");第二个参数“伪类”(如果不是伪类,设置为null)
    查看全部
    0 采集 收起 来源:获取样式

    2018-03-22

  • 多物体运动 for循环来为每一个TagNameList[i]添加事件 并添加属性来区分各自的定时器(用于取消) 利用参数中的this来指定所选择的当前元素 多物体不要共用一个值,在对象上定义一个单独的属性保持值 存在多项共用一个值,并且这个值会发生改变时,最好单独给赋值,避免出现争用的情况。 <script> window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ // 给每一个li设置一个timer,才不会致使他们去抢timer aLi[i].timer=null; aLi[i].onmouseover=function(){ startMove(this,400); }; aLi[i].onmouseout=function(){ startMove(this,200) } } var oDivLi=document.getElementsByTagName('div'); for(var j=0;j<oDivLi.length;j++){ oDivLi[j].timer=null; oDivLi[j].alpha=30; oDivLi[j].onmouseover=function(){ startMove1(this,100); }; oDivLi[j].onmouseout=function(){ startMove1(this,30); } } };
    查看全部
    0 采集 收起 来源:JS多物体动画

    2018-03-22

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

    2016-10-25

  • 1、 当speed负值时=-0.9、-0.8、-0.7...时,向上取整时speed值=0,此后的速度一直为0,所以要向下取整-0.9、-0.8...向下取整等于-1;同理当speed为正值时0.9、0.8、0.7...向上取=1,向下取=0; 至于为什么要取整,是因为offsetWidth等像素值最小单元为1px,有小数存在时会四舍五入,当接近目标值时speed值小于0.5时,此时的obj.offsetWidth小数位<0.5时就永远地进不了位(如196.4四舍五入为196);
    查看全部
    0 采集 收起 来源:JS缓冲动画

    2018-03-22

举报

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

微信扫码,参与3人拼团

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

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