JS动画效果_学习笔记

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

JS动画效果

最热最新

于梦中

json = {name1：key1,name2:key2...nameN:keyN} for(var i in json) { alert(i);//此时弹出的是json里的name alert(json[i])；//此时弹出的是json里的key }

查看全部

0 采集收起来源：完美运动框架
2016-03-31
于梦中

//最终封装的'完美移动框架' function startMove(obj,json,fn){ var flag=true;//标志所有运动是否到达目标值 clearInterval(obj.timer); obj.timer=setInterval(function(){ 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; } 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){ fu(); } } },30); } //取样式 function getStyle(obj,attr){ if(obj.currentStyle){//IE取样式 return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }

查看全部

0 采集收起来源：完美运动框架
2018-03-22
小小_34555

获取样式属性函数 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr];//IE }else{ return getcomputedStyle(obj,false)[attr];//非IE } }

查看全部

0 采集收起来源：获取样式
2016-03-30
风233 04:49

json 对象吗？

查看全部

0 采集收起来源：完美运动框架
2016-03-30
门上的摇晃头脑还在炫耀 11:09

实现多属性同时改变。使用json传递参数，遍历json中的参数

查看全部

0 采集收起来源：完美运动框架
2016-03-30
门上的摇晃头脑还在炫耀 00:01

链式运动，向函数传递多一个函数参数，当运动结束之后调用该函数以达到链式运动效果

查看全部

0 采集收起来源：JS链式动画
2016-03-30
风233 09:33

可以使用currentStyle（IE）直接获取样式表样式属性，避免了把如obj.style.width写在行内

查看全部

0 采集收起来源：获取样式
2016-03-30
荷犸 11:35

获取样式的函数

查看全部

0 采集收起来源：获取样式
2016-03-30
荷犸 08:34

运动缓冲

查看全部

0 采集收起来源：JS缓冲动画
2016-03-30
霜花似雪 03:27

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

查看全部

0 采集收起来源：JS动画效果课程介绍
2016-03-29
farewell40 07:13

多物体运动，所有东西不能共用

查看全部

0 采集收起来源：JS多物体动画
2016-03-29
漩涡鸣人007

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>多物体移动</title> <style type="text/css"> *{margin:0;padding:0;} ul{list-style:none;} ul li{width: 200px;height: 100px;background: yellow;margin-bottom: 20px;} </style> <script type="text/javascript"> window.onload=function(){ var olis=document.getElementsByTagName('li'); for(var i=0,l=olis.length;i<l;i++){ olis[i].timer=null; olis[i].onmouseover=function(){ startMove(this,400); } olis[i].onmouseout=function(){ startMove(this,200); } } } //var timer=null; function startMove(obj,target){ clearInterval(obj.timer); var speed=(target-obj.offsetWidth)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); obj.timer=setInterval(function(){ if(obj.offsetWidth==target){ clearInterval(obj.timer); }else{ obj.style.width=obj.offsetWidth+speed+'px'; } },30) } </script> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>

查看全部

2 采集收起来源：JS多物体动画
2018-03-22
漩涡鸣人007

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>多物体改变透明度</title> <style> *{margin:0;padding:0;} div{width:100px;height:100px;margin:10px;float:left;background:green;filter:alpha(opacity:30);opacity:0.3;} </style> <script> window.onload=function(){ var oDiv=document.getElementsByTagName('div'); for(var i=0,l=oDiv.length;i<l;i++){ oDiv[i].alpha=30; oDiv[i].onmouseover=function(){ startChange(this,100); } oDiv[i].onmouseout=function(){ startChange(this,30); } } } function startChange(obj,target){ clearInterval(obj.timer); var speed=obj.alpha>target?-10:10; obj.timer=setInterval(function(){ //var speed=obj.alpha>target?-10:10; if(obj.alpha==target){ clearInterval(obj.timer); }else{ obj.alpha+=speed; obj.style.filter='alpha(opacity:'+obj.alpha+')'; obj.style.opacity=obj.alpha/100; } },30) } </script> </head> <body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> </body> </html>

查看全部

2 采集收起来源：JS多物体动画
2018-03-22
阳光123 03:32

速度缓冲运动多物体运动任意值变动链式运动同时运动

查看全部

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

jQuery里已有的一个动画框架，与之前的js封装相似，还可以考虑使用css3的方法实现动画效果

查看全部

0 采集收起来源：jQuery动画案例
2016-03-29