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

JS动画效果

vivian Web前端工程师
难度初级
时长 2小时 8分
学习人数
综合评分9.60
537人评价 查看评价
9.8 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • 运动框架实现思路
    查看全部
  • var json={a:12,b=13};
    查看全部
  • 运动框架实现思路
    查看全部
  • math.round();四舍五入 parseInt parseFloat
    查看全部
  • offsetWidth 包括border
    查看全部
    0 采集 收起 来源:获取样式

    2015-06-28

  • obj.currentStyle[attr] IE getComputedStyle(obj,false)[attr]
    查看全部
    0 采集 收起 来源:获取样式

    2015-06-29

  • alert(Math.floor(3.98))向下取整 alert(Math.ceil(3.22))向上取整 遇到这种运动涉及到数字的问题都要做一个判断,向上或者向下取整 <script> window.onload = function(){ var oDiv = document.getElementById("div1"); oDiv.onmouseover = function(){ startMove(0); }; oDiv.onmouseout = function(){ startMove(-200); }; }; var timer = null function startMove(offleft){ clearInterval(timer); var oDiv = document.getElementById("div1"); timer = setInterval(function(){ var speed = (offleft - oDiv.offsetLeft)/10; speed = speed > 0 ?Math.ceil(speed):Math.floor(speed); if(oDiv.offsetLeft == offleft ){ clearInterval(timer); } oDiv.style.left = oDiv.offsetLeft+speed+'px'; },30); } </script>
    查看全部
    1 采集 收起 来源:JS缓冲动画

    2018-03-22

  • <script> window.onload = function(){ var oDiv =document.getElementById('div1'); oDiv.onmouseover=function(){ startMove(100); } oDiv.onmouseout=function(){ startMove(30); } } var timer = null; var alpha = 30; function startMove(iTarget){ var oDiv =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; oDiv.style.opacity = alpha/100 } },30) } </script> 所有主流浏览器(IE,Firefox,Opera,Chrome,Safari)都支持opacity属性 注意:IE8和早期版本支持另一种过滤器属性。像:filter:Alpha(opacity=50)
    查看全部
    0 采集 收起 来源:JS透明度动画

    2018-03-22

  • JS动画效果: 2-1:速度动画: 为防止动画累加,在每次触发动画事件时,应该先清除前一个没有完成的动画,即清除钱一池开启的定时器,然后这次再开启一个定时器。 offsetLeft值可以获取当前的left值, 而offsetLeft属性不能被赋值,只能获取 window.onload = function(){ var oDiv = document.getElementById("div1"); oDiv.onmouseover = function(){ startMove(0); }; oDiv.onmouseout = function(){ startMove(-200); }; }; var timer = null function startMove(offleft){ clearInterval(timer); var oDiv = document.getElementById("div1"); timer = setInterval(function(){ var speed = 0; if(oDiv.offsetLeft > offleft ){ speed = -10; }else if(oDiv.offsetLeft < offleft) { speed = 10; }else{ clearInterval(timer); } oDiv.style.left = oDiv.offsetLeft+speed+'px'; },30); }
    查看全部
    0 采集 收起 来源:JS速度动画

    2018-03-22

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

    2015-06-22

  • 鼠标离开,值变为原来的,代码顺序反过来
    查看全部
    0 采集 收起 来源:JS链式动画

    2015-06-20

  • 鼠标移入变宽、高、透明度
    查看全部
    0 采集 收起 来源:JS链式动画

    2015-06-20

  • alert弹出窗口提醒
    查看全部
    0 采集 收起 来源:JS链式动画

    2015-06-20

  • alert弹出窗口提醒
    查看全部
    0 采集 收起 来源:JS链式动画

    2015-06-20

举报

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

微信扫码,参与3人拼团

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

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