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

JS动画效果

vivian Web前端工程师
难度初级
时长 2小时 8分
学习人数
综合评分9.60
537人评价 查看评价
9.8 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • 函数体中的局部变量只在函数执行时生成的调用对象中存在,函数执行完毕时局部变量即刻销毁。就是说你的函数执行到开启定时器以后,就算执行结束了,那么这个局部变量就会被销毁。也就是说刚打开定时器,定时器就没了
    查看全部
    0 采集 收起 来源:JS速度动画

    2016-04-14

  • var timer=null; function startMove(speed,itarget){ // function startMove(itarget){ clearInterval(timer); var red=document.getElementById('red'); var timer=setInterval(function(){ //单参数方法 /*var speed=0; startMove里面的timer前面不能加var声明 加的话你前面清除的是方面外面的全局timer 然后你每次执行方法都重新定义了一个局部的timer定时器 简单说方面里面定时器的timer不是外面全局的timer
    查看全部
    0 采集 收起 来源:JS速度动画

    2016-04-14

  • 透明度运动 1、所有主流浏览器(IE,Firefox,Opera,Chrome,Safari)都支持opacity属性。 注意:IE8和早期版本支持另一种过滤器属性。像:filter:Alpha(opacity=100) 2、由于无法获取对象的透明度,所以可通过变量储存。(var alpha=初始值 alpha+=speed) <script type="text/javascript"> window.onload = function(){ var div1 = document.getElementById('div1'); div1.onmouseover = function(){ startMove(100); } div1.onmouseout = function(){ startMove(30); } } var timer = null; var alpha = 30; function startMove(iTarget){ var div1 = document.getElementById('div1'); clearInterval(timer); timer = setInterval(function(){ var speed = 0; if(alpha < iTarget){ speed = 10; } else { speed = -10; } if(alpha == iTarget){ clearInterval(timer); } else { alpha += speed; div1.style.filter = 'alpha(opacity:'+alpha+')'; div1.style.opacity = alpha / 100; } },30); } </script>
    查看全部
    0 采集 收起 来源:JS透明度动画

    2018-03-22

  • 用clientWidth代替offsetWidth也可以解决,offsetWidth包含了边框,而clientWidth只包含了内边距和内容,不包含外边框, 更加方便。
    查看全部
    0 采集 收起 来源:获取样式

    2016-04-13

  • 获取css样式的封装函数,if是针对ie浏览器,else是针对firefox浏览器。
    查看全部
    0 采集 收起 来源:获取样式

    2016-04-13

  • parseInt()的作用是解析一个字符串,并返回一个整数。 width后面带单位"px" 所以要用parseInt()解析一下。
    查看全部
    0 采集 收起 来源:获取样式

    2018-03-22

  • 运动框架实现思路
    查看全部
  • opacity不透明度
    查看全部
  • 当speed>0时,向上取整;当speed<0时,向下取整。 老师的代码鼠标滑入滑出的运行速度都是一样的, 而自己的代码能分别控制速度,更好。
    查看全部
    0 采集 收起 来源:JS缓冲动画

    2018-03-22

  • 多物体运动,涉及到的公用参数,若是无改变参数可以,若是改变参数则不能共用,会引发各物体争抢的事故,利用对象可编号的特性定义各物体独自的参数体。如obj[i].timer=null(定时器标识),obj[i].alpha=30(透明度标识)
    查看全部
    0 采集 收起 来源:JS多物体动画

    2016-04-12

  • 透明度运动 1、所有主流浏览器(IE,Firefox,Opera,Chrome,Safari)都支持opacity属性。 注意:IE8和早期版本支持另一种过滤器属性。像:filter:Alpha(opacity=100) 2、由于无法直接修改对象的透明度,所以通过全局变量储存方式。(设定一个全局变量:var alpha=初始值 alpha+=speed) window.onload=function(){ var oDiv2=document.getElementById('div2'); oDiv2.onmouseover=function(){ change(30); }; oDiv2.onmouseout=function(){ change(100); }; }; //透明度运动 var timer2=null, alpha=100; function change(iTarget){ var oDiv2=document.getElementById('div2'); clearInterval(timer2); timer2=setInterval(function(){ if(alpha==iTarget){ clearInterval(timer2); }else{ if (alpha>iTarget) { alpha+=-10; }else{ alpha+=10; } oDiv2.style.opacity=alpha/100; oDiv2.style.filter=':alpha(opacity:'+alpha+')'; } },30); } </script>
    查看全部
    0 采集 收起 来源:JS透明度动画

    2018-03-22

  • 多物体运动不能共用任何参数,
    查看全部
    0 采集 收起 来源:JS多物体动画

    2016-04-12

  • //HTML文件中的 window.onload=function(){ var oMain=document.getElementById('move'), oLis=oMain.getElementsByTagName('a'); for (var i = 0; i < oLis.length; i++) { oLis[i].onmouseover=function(){ var _this=this.getElementsByTagName('i')[0]; startMove(_this,{top:-20,opacity:0},15,function(){ _this.style.top=40+'px'; startMove(_this,{top:20,opacity:100},15) }); }; } }
    查看全部
    0 采集 收起 来源:JS动画案例

    2018-03-22

  • //move.js文件 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr];//if IE } else{ return getComputedStyle(obj,false)[attr];//if firefox } } function startMove(obj,json,time,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ var flag=true;//假设所有目标均已完成 var icur=0; if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); } else{ icur=parseInt(getStyle(obj,attr)); } var speed=(json[attr]-icur)/10; 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(); } } } },time) }
    查看全部
    0 采集 收起 来源:JS动画案例

    2018-03-22

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

举报

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

微信扫码,参与3人拼团

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

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