JS动画效果_学习笔记

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

JS动画效果

最热最新

白空阳

链式运动函数：鼠标移开执行的动作与鼠标滑过的动作相反。(递归方式) 不能用this指代不然会出错

查看全部

0 采集收起来源：JS链式动画
2016-05-12
weibo_幸福长大了_0

多物体时变量不共用

查看全部

0 采集收起来源：JS多物体动画
2016-05-12
lzlbu2

运动框架实现思路

查看全部

0 采集收起来源：JS动画效果课程介绍
2016-05-12
13weibo_Debbie 08:35

遇到变化速度运动时，一定要判断上下取整的问题。 speed=speed>0?Math.ceil(speed):Math.floor(speed);

查看全部

0 采集收起来源：JS缓冲动画
2018-03-22
呆脑袋 10:57

淘宝转圈动画

查看全部

0 采集收起来源：JS动画案例
2016-05-12
weibo_幸福长大了_0 08:22

clearInterval(timeer)初始时清除所有定时器，

查看全部

0 采集收起来源：JS速度动画
2016-05-12
Chigga

<script type="text/javascript"> window.onload=function(){ var c=document.getElementsByTagName("li"); for(var i=0;i<c.length;i++){ c[i].alpaha=30; c[i].time=null; c[i].time1=null; c[i].onmouseover=function(){ star(this,500); alp(this,100); } c[i].onmouseout=function(){ star(this,300); alp(this,30); } } function alp(obj1,target1){ clearInterval(obj1.time1); obj1.time1=setInterval(function(){ if (obj1.alpaha>target1) { speed=-10; } else{ speed=10; } if (obj1.alpaha==target1) { clearInterval(obj1.time1); }else{ obj1.alpaha+=speed; obj1.style.opacity=obj1.alpaha/100; } }) } function star(obj,target){ clearInterval(obj.time); obj.time=setInterval(function(){ if(obj.offsetWidth==target){ clearInterval(obj.time); }else{ var speed=(target-obj.offsetWidth)/5; speed=speed>0?Math.ceil(speed):Math.floor(speed); obj.style.width=obj.offsetWidth+speed+"px"; } },50) } } </script>

查看全部

0 采集收起来源：JS多物体动画
2018-03-22
13weibo_Debbie 10:38

防止鼠标滑动事件的叠加，应该在执行函数之间对定时器进行清零 var timer=null; clearInterval(timer);

查看全部

0 采集收起来源：JS速度动画
2016-05-12
白空阳

获取容器某个具体的样式： obj.currentStyle[type]; 针对IE浏览器 getComputedStyle(obj, false)[type]; 针对FireFox浏览器比如，我要获取容器obj的宽（该容器存在border边框）： eWidth = obj.currentStyle[width] || getComputedStyle(obj,false)[width]; 而不能使用offsetWidth，因为offsetWidth获取的是整个容器（包含边框等属性）的宽。

查看全部

0 采集收起来源：获取样式
2016-05-12
111216sod

getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle(attr);} }

查看全部

0 采集收起来源：任意属性值（一）
2016-05-12
111216sod 11:34

getstyle(){ if(obj.currentstyle){return obj.currentStyle;} else{ return getcomputedStyle(obj,false);} }

查看全部

0 采集收起来源：获取样式
2016-05-12
111216sod 04:03

oDiv.style.width = oDiv.offsetWidth-1+'px';通过减一来不断使宽度变小。

查看全部

0 采集收起来源：获取样式
2016-05-12
暮雨梨

//最终封装的'完美移动框架' function startMove(obj,json,fn){ clearInterval(obj.timer); var flag;//标志所有运动是否到达目标值 obj.timer=setInterval(function(){ flag=true; //进入定时器时,现将flag设置为所有的属性都已达到目标值 for(var attr in json){ //取属性值 var curr=0; //判断是否为透明度 if(attr=='opacity'){ curr=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ curr=parseInt(getStyle(obj,attr)); } //移动速度处理 var speed=0; speed=(json[attr]-curr)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(curr!=json[attr]){ flag=false; //假设有三个json的key/value值,这三个值中只要有一个没有达到目标值,flag就等于false. } if (attr=='opacity') { obj.style.filter='alpha(opacity:'+(curr+speed)+")"; obj.style.opacity=(curr+speed)/100; }else{ obj.style[attr]=curr+speed+'px'; } } if(flag){ clearInterval(obj.timer); if(fn){ fn(); } } },30); }

查看全部

0 采集收起来源：完美运动框架
2018-03-22
lemonda 09:25

startMove可以改变款和高

查看全部

0 采集收起来源：任意属性值（一）
2016-05-11
lemonda

function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr] } 可以使用getStyle代替offset

查看全部

0 采集收起来源：任意属性值（一）
2016-05-11