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

JS动画效果

vivian Web前端工程师
难度初级
时长 2小时 8分
学习人数
综合评分9.60
537人评价 查看评价
9.8 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • <script> window.onload = function(){ var txt1 = document.getElementById("txt1"); var txt2 = document.getElementById("txt2"); txt1.onmouseover = function(){ startMove(this,400,"height"); } txt1.onmouseout = function(){ startMove(this,200,"height"); } txt2.onmouseover = function(){ startMove(this,400,"width"); } txt2.onmouseout = function(){ startMove(this,200,"width"); } } //var timer = null; function startMove(obj,iTarget,attr){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var cur = parseInt(getStyle(obj,attr)); var speed = (iTarget-cur)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(cur == iTarget){ clearInterval(obj.timer); }else{ obj.style[attr] = cur+speed+"px"; } },30) } //获取style样式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } </script>
    查看全部
  • 功能不相同的代码可以当做一个参数传值,功能相同的代码合并
    查看全部
  • 在用到obj.offsetWidth或者obj.offsetHeight的时候,如果,obj对象的样式有border等属性,则需要用getStyle()函数解决实际width和height值样式不兼容的问题 //获取style样式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }
    查看全部
  • <script> window.onload = function(){ setInterval(function(){ startMove(); },30) } function startMove(){ var oDiv = document.getElementById("oDiv"); //console.log(oDiv.offsetWidth); oDiv.style.width = parseInt(getStyle(oDiv,"width"))-1+"px"; } //获取style样式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } </script>
    查看全部
    0 采集 收起 来源:获取样式

    2018-03-22

  • <script> window.onload = function(){ var aLis = document.getElementsByTagName("li"); for(var i=0;i<aLis.length;i++){ aLis[i].timer = null; aLis[i].onmouseover = function(){ startMove(this,400); } aLis[i].onmouseout = function(){ startMove(this,200) } } } //var timer =null; function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = (iTarget - obj.offsetWidth)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); obj.style.width = obj.offsetWidth+speed+"px"; },30) } </script>
    查看全部
    0 采集 收起 来源:JS多物体动画

    2018-03-22

  • var speed = (iTarget - box.offsetLeft)/20; speed = speed>0?Math.ceil(speed):Math.floor(speed); Math.floor(3.98)向下取整; Math.ceil(3.2)向上取整
    查看全部
    0 采集 收起 来源:JS缓冲动画

    2018-03-22

  • 1.全局变量和它的作用域   全局变量是指在程序开头的说明部分定义和说明的量。它的作用域分为两种情况: (1)在全局变量和局部变量不同名时,其作用域是整个程序。 (2)在全局变量和局部变量同名时,全局变量的作用域不包含同名局部变量的作用域。 2.局部变量和它的作用域   凡是在子程序内部使用的变量,必须在子程序中加入说明。这种在子程序内部说明的变量称为局部变量。局部变量的作用域是其所在的子程序。形式参数也只能在子程序中有效。因此也属于局部变量。局部变量的作用域分为两种情况: (1)当外层过程序的局部变量名和嵌套过程中的局部变量不同名时,外层过程的局部变量作用域包含嵌套过琛。 (2)当外层过程的局部变量名和嵌套过程内的局部变量名同名时,外层局部变量名的作用域不包含此过程。
    查看全部
    0 采集 收起 来源:JS速度动画

    2015-06-02

  • 取得行内样式
    查看全部
    0 采集 收起 来源:获取样式

    2015-06-01

  • 鼠标移入时:
    查看全部
  • 链式运动
    查看全部
    0 采集 收起 来源:同时运动

    2015-05-08

  • function move(obj,json,fn){ var flag=true;//假设同时运动都完成了 clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ if(attr=='opacity'){ var icur=Math.round(parseFloat(getStyle(obj,attr))*100);//四舍五入,否则会出现很长一串数字,0.07*100结果为7.0000000000001 }else{ var icur=parseInt(getStyle(obj,attr)); } var speed=(json[attr]-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur!=json[attr]){ flag=false;//所有的同时运动没有全部完成 } if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(icur+speed)+')'; obj.style.opacity=(icur+speed)/100; }else{ obj.style[attr]=icur+speed+'px'; } if(flag){//所有的同时运动都完成了 clearInterval(obj.timer); if(fn){ fn(); } } } },30) } //getStyle获取的是单一样式,backgroundColor不能获取background复合样式 //获取的是自己设置过的样式 //要遵守上面两条,否则有兼容性问题 function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr]; }
    查看全部
  • obj.offsetWidth=width+padding+border 取出的为数值且是css,js共同影响的结果 function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr]; } parseInt(getStyle(oDiv,'width'))这样结果才为数值
    查看全部
    0 采集 收起 来源:获取样式

    2015-05-03

  • img{ opacity:0.3;/*针对除了ie之外的其他标准浏览器*/ filter:alpha(opacity:30);/*针对ie*/}
    查看全部
    0 采集 收起 来源:JS透明度动画

    2015-05-03

  • if(oDiv.offsetLeft==0){ clearInterval(timer); return; }
    查看全部
    0 采集 收起 来源:JS速度动画

    2015-05-03

  • 解决上面的问题,第二个方法。封装一个getStyle方法。
    查看全部
    0 采集 收起 来源:获取样式

    2015-04-24

举报

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

微信扫码,参与3人拼团

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

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