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

JS动画效果

vivian Web前端工程师
难度初级
时长 2小时 8分
学习人数
综合评分9.60
537人评价 查看评价
9.8 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • 在JS中obj.style.width等价于obj.style['width']
    查看全部
  • 元素添加边框后,dom.style.width!=dom.offsetWidth;所以不能用offsetWidth来做处理,可以使用parseInt(dom.style.width); offsetWidth返回的是整数,而width返回的是字符串 使用如下获取元素的样式:
    查看全部
    0 采集 收起 来源:获取样式

    2016-10-03

  • 同时对多个元素的事件添加定时器等效果时,不能定义一个公用的变量来接收定时器的返回值,否则在事件被快速频繁的触发时,会快速频繁的创建多个定时器,而来不及清除定时器,所以需要将该变量绑定在元素上,从而避免以上问题。 如图:
    查看全部
    0 采集 收起 来源:JS多物体动画

    2016-10-03

  • 为什么明明设的的200的时候结束。但190.5就结束了。不科学
    查看全部
    0 采集 收起 来源:JS缓冲动画

    2016-10-03

  • offsetLeft和offsetTop都是元素的左上角与浏览器边框的距离,如果元素在浏览器的左边框之外,则offsetLeft为负值,当全部显示出来且贴合浏览器左边框则offsetLeft为0
    查看全部
    0 采集 收起 来源:JS速度动画

    2016-10-03

  • 123
    查看全部
    0 采集 收起 来源:JS速度动画

    2016-09-30

  • 运动 思路
    查看全部
  • 以前就学过this.timer.原来是这个问题,用于多个物体同一个动画时,找到对应的物体加定时器用的
    查看全部
    0 采集 收起 来源:JS多物体动画

    2016-09-29

  • 凡是遇到速度数字的,一定做一个上取整和下取整的判断
    查看全部
    0 采集 收起 来源:JS缓冲动画

    2016-09-29

  • 结合运动框架的图标小案例
    查看全部
    0 采集 收起 来源:JS动画案例

    2016-09-28

  • 移入移出代码
    查看全部
  • json数据格式{a:value,b:value} 取数据时要用到for-in语句 for(var i in json){alert(i);alert(json[i]);}//alert(i)输出的是a和b,alert(json[i])输出的是value. 此外,将对象转换为json数据时,可使用google开发的gson,里面封装了fromJson和toJson2个方法。
    查看全部
  • JS中 obj.style.attr 只能获取行内样式 要获取非行内样式要通过obj.currentStyle[attr]或者getComputedStyle(obj,false)[attr]方法获取 可以封装为function getStyle(obj,attr){ if(obj.currentStyle){return obj.currentStyle[attr];}else{returngetComputedStyle(obj,false)[attr]}} obj.offsetWidth 返回值是数值所以不用parseInt();而obj.style.width获取的是像素值
    查看全部
    0 采集 收起 来源:获取样式

    2016-09-28

  • 多物体运动 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

举报

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

微信扫码,参与3人拼团

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

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