JS动画效果_学习笔记

首页免费课 JS动画效果笔记

JS动画效果

最热最新

兀訁

关于链式运动的BUG：var flag=true;定义在了for-in外面，而因为json中的属性无法同一时间运动到目标值，所以flag的值在前面的过程一定会变为false。变为false之后，当所有的属性值都运动到目标值也没有语句使它变为true，所以fn()不会执行，就无法关闭定时器和执行下一个函数了。

查看全部

1 采集收起来源：完美运动框架
2016-06-03
qq_武家小妮儿_0

script文件： <script> window.onload=function(){ var oDiv = document.getElementById('div1'); oDiv.onmouseover=function(){ startMove(0); } oDiv.onmouseout=function(){ startMove(-200); } } var timer=null; function startMove(iTarget){ clearInterval(timer); var oDiv = document.getElementById('div1'); timer=setInterval(function(){ var speed=0; if(oDiv.offsetLeft>iTarget){ speed=-10; }else{ speed=10; } if(oDiv.offsetLeft==iTarget){ clearInterval(timer); }else{ oDiv.style.left=oDiv.offsetLeft+speed+'px'; } },30); } </script>

查看全部

0 采集收起来源：JS速度动画
2018-03-22
qq_武家小妮儿_0

运动框架实现思路 1.速度（改变值left、right、width、height、opacity） 2.缓冲运动 3.多物体运动 4.任意值变化 5.链式运动 6.同时运动

查看全部

0 采集收起来源：JS动画效果课程介绍
2016-06-03
Zero_index

<body> <div id="div1"> 分享 </div> <script> window.onload = function() { var oDiv1 = document.getElementById("div1"); oDiv1.onmouseover = function(){ startMove(0); } oDiv1.onmouseout = function() { startMove(-200); } } var timer=null; function startMove(iTarget) { clearInterval(timer); var oDiv1 = document.getElementById('div1'); timer=setInterval(function(){ var speed = 0; if(oDiv1.offsetLeft>iTarget){ speed = -1; }else{ speed = 1; } if(oDiv1.offsetLeft==iTarget){ clearInterval(timer); }else{ oDiv1.style.left=oDiv1.offsetLeft+speed+"px"; } },30); } </script> </body>

查看全部

1 采集收起来源：JS速度动画
2018-03-22
qq_吊儿郎当_1

04:37

查看全部

0 采集收起来源：JS链式动画
2016-06-02
兀訁

aLi[i].timer就是针对当前这个DOM节点创建了一个自定义的属性，后边也就能自己防问自己的也不会起冲突了～

查看全部

0 采集收起来源：JS多物体动画
2016-06-02
兀訁

经验之谈：“多物体运动，所有的东西都不能共用。”

查看全部

0 采集收起来源：JS多物体动画
2016-06-02
Sharron

获取对象样式：IE浏览器 obj.currentStyle[attr] firefox: getComputedStyle(obj,boolean)[attr];

查看全部

0 采集收起来源：获取样式
2018-03-22
兀訁

原因：因为有除法，当offsetLeft值变的越来越小时，最后相除会使speed变成小数，从而offsetLeft与speed相加会有小数，又因显示器的最小像素单位是1px，所以浏览器默认向下取整（变小，即floor），将小数省略，小数省略后，最终的值会变小，从而导致程序无法进入if判断，进入死循环。这一点可以用console.log(speed)可以验证，speed的log会一直输出，因为程序死循环了。所以，需要ceil or floor来解决这个问题，让程序进入if的判断，终止循环。

查看全部

0 采集收起来源：JS缓冲动画
2016-06-02
空之境界丶

运动框架实现思路 1.速度（改变left,right,width,height,opacity） 2.缓冲运动 3.多物体运动 4.任意值运动 5.链条运动 6.同时运动

查看全部

0 采集收起来源：JS动画效果课程介绍
2016-06-02
卡奇 09:30

得到对象属性值的方法

查看全部

0 采集收起来源：获取样式
2016-06-01
左手键盘右手鼠标

链式动作，如果是单个物体传入this没有错误，如果是多个物体，则需要将this保存在一个变量_this中，然后使用这个变量来传递。

查看全部

0 采集收起来源：JS链式动画
2016-05-31
左手键盘右手鼠标

获取样式： function getStyle(obj.attribute){ if(obj.currentStyle){ return obj.currentStyle(attribute); //针对IE浏览器 }else{ return getComputedStyle(obj,false)[attribute]; //针对非IE浏览器 } }

查看全部

0 采集收起来源：获取样式
2016-05-31
左手键盘右手鼠标

多物体。。。不要使用共用属性。。可以使用 element.属性。。自定义属性为每一个Obj定义专属的属性

查看全部

0 采集收起来源：JS多物体动画
2016-05-31
qq_你瘦该你拽_0 03:30

运动框架实现思路

查看全部

0 采集收起来源：JS动画效果课程介绍
2016-05-30