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

JS动画效果

vivian Web前端工程师
难度初级
时长 2小时 8分
学习人数
综合评分9.60
537人评价 查看评价
9.8 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • JS动画效果: 运动框架实现思路: 1.速度(改变值left,right,width,height,opacity) 2.缓冲运动 3.多物体运动 4.任意值变化 5.链式运动 6.同时运动
    查看全部
  • 基础jQeury: $(function(){ $('#move a').mouseenter(function(){ $(this).find('i').animate({top:"200px",opacity:0},300,function(){ $(this).css({top:-200}); $(this).animate({top:"0px",opacity:100},200); }); }); });
    查看全部
    0 采集 收起 来源:jQuery动画案例

    2018-03-22

  • 不同值的地方作为参数来传入
    查看全部
    0 采集 收起 来源:JS速度动画

    2016-03-16

  • (打码总结)floor向下取整ceil向上取整
    查看全部
    0 采集 收起 来源:JS缓冲动画

    2016-03-16

  • (打码总结)当两段代码很相似的时候把不同的地方提取出来作为参数传进去
    查看全部
    0 采集 收起 来源:JS速度动画

    2016-03-16

  • 运动框架实现思路
    查看全部
  • json
    查看全部
  • IE&火狐区别对待
    查看全部
    1 采集 收起 来源:获取样式

    2018-03-22

  • 传递的参数不一样,封装方式不同,比如透明度opacity是小数,也没有单位px,此外,Math.round是对取出的数值四舍五入。
    查看全部
  • obj.style.width可以写为:obj.style['width'],如此,style的属性,就可以作为参数传递。
    查看全部
  • 速度设置
    查看全部
    0 采集 收起 来源:JS缓冲动画

    2016-03-16

  • width和border边框都写在css样式里面,obj.offsetWidth则是width和border的宽度,而不只是width的宽度,解决:<br> (1)width写在HTML行间 (2)利用函数:IE:currentStyle;非IE:getComputedStyle function getStyle(obj,attr){ //获取样式,attr:属性,如width if(obj.currentStyle){ return currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } }
    查看全部
    0 采集 收起 来源:获取样式

    2018-03-22

  • 多物体运动时: (1)不能共用一个定时器,快速移动时出错,可以分别定义:如aLi[i].timer=null,再传参数(obj,iTarget),则定时器是obj.timer; 传事件参数时,传this(当前正在执行的)给obj,而不是aLi[i] (2)同理,透明度运动时所有的参数也不能共用,包括定时器Timer与alpha值
    查看全部
    0 采集 收起 来源:JS多物体动画

    2016-03-15

  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>获取样式</title> <style type="text/css"> #div1{ height: 200px; background: #f00; border:4px solid #0000FF } </style> </head> <body> <div id="div1" ></div> </body> <script type="text/javascript"> window.onload=function(){ startMove(); } function startMove(){ setInterval(function(){ var div1=document.getElementById("div1"); //div1.style.width=div1.offsetWidth-1+"px"; //div1.style.width=parseInt(div1.style.width)-1+"px"; div1.style.width=parseInt(getStyle(div1,"width"))-1+"px"; },30); } //一封装好的函数。可以改变宽度,高度,字号。。。的大小。获取样式的封装函数 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr];//针对ie浏览器。 }else{ return getComputedStyle(obj,false)[attr];//针对firefox浏览器。 } } </script> </html> <!-- -->
    查看全部
    2 采集 收起 来源:获取样式

    2018-03-22

  • 运动框架实现思路
    查看全部

举报

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

微信扫码,参与3人拼团

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

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