JS动画效果_学习笔记

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

JS动画效果

最热最新

qq_小天狼星_0

//同时运动框架 function startMove(obj,json,fn){ clearInterval(obj.timer);//清除定时器，避免重复生成多个定时器 obj.timer=setInterval(function(){ var flag=true;//假设刚开始时所有运动都已完成 for (var attr in json) {//遍历json var icur=null; //1.判断类型 if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur=parseInt(getStyle(obj,attr)); } //2.算速度 var speed=(json[attr]-icur)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); //3.检测停止 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(); } } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }

查看全部

4 采集收起来源：完美运动框架
2018-03-22
名字太难听_不改行不行

var json={a:12,b:13};要用fon...in...循环遍历json

查看全部

0 采集收起来源：完美运动框架
2016-02-24
幻月枫眠

function getStyle(obj,attr){ if(obj.currentStyle){//IE return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } } //json = {attr1:iTarget1,attr2:iTarget2} function startMove(obj,json,fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var flag = true; //标志所有运动是否到达目标值 for(var attr in json){ //取当前值 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)/8; 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)+')'; //IE obj.style.opacity = (icur+speed)/100; } else { obj.style[attr] = icur + speed +'px'; } if(flag) { clearInterval(obj.timer); flag = true; if(fn){ fn(); } } } },20); }

查看全部

0 采集收起来源：JS动画案例
2018-03-22
幻月枫眠

//最终封装的'完美移动框架' 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
qq_小天狼星_0

function starMove(obj,attr,iTarget){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var icur=0; //用if判断属性 if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))); //由于opacity的值是小数，需要用parseFloat转为小数值，Math.round四舍五入 }else{ icur=parseInt(getStyle(obj,attr)); } var speed=(iTarget-icur)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur==iTarget){ clearInterval(obj.timer); }else{ if (attr=='opacity') { obj.style.filter='alpha(opacity:'+icur+speed+')'; obj.style.opacity=(icur+speed)/10; }else{ obj.style[attr]=icur+speed+'px'; } } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,null)[attr]; } } </script>

查看全部

0 采集收起来源：任意属性值（二）
2018-03-22
qq_小天狼星_0

<script type="text/javascript"> window.onload=function(){ var oDiv1=document.getElementById('div1'), Div=oDiv1.getElementsByTagName('div'); for (var i = 0; i < Div.length; i++) { Div[i].timer=null; Div[i].onmouseover=function(){ starMove(this,'width',400); }; Div[i].onmouseout=function(){ starMove(this,'width',200); }; }; }; //匀速运动 //var timer1=null; function starMove(obj,attr,iTarget){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var icur=parseInt(getStyle(obj,attr)), speed=(iTarget-icur)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur==iTarget){ clearInterval(obj.timer); }else{ obj.style[attr]=icur+speed+'px'; } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,null)[attr]; } } </script>

查看全部

0 采集收起来源：任意属性值（一）
2018-03-22
qq_小天狼星_0 11:34

1、offsetWidth返回的是oDrag的padding+border+width值之和。 2、style.width返回的是行内样式（)，而返回的是字符串，需要用parseInt转换为数值。 3、为了实现结构样式分离，减少行内元素，可封装函数来获取CSS里定义的style。 </style> <script> window.onload=function(){ var oDiv=document.getElementById('div1'); oDiv.onmouseover=function(){ starMove(); }; }; var timer=null; function starMove(){ var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function(){ oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1+'px'; },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr];//兼容IE }else{ return getComputedStyle(obj,null)[attr];//兼容Firefox } } </script>

查看全部

0 采集收起来源：获取样式
2018-03-22
甜蜜涩儿

getStyle()

查看全部

0 采集收起来源：获取样式
2016-02-23
qq_小天狼星_0

透明度运动 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
qq_小天狼星_0

匀速运动：<br> 1、设置定时器，每隔一段时间更改位置，达到匀速运动<br> 2、设置定时器前需清除定时器，以防多次触发重复生成多个定时器<br> 3、当运动位置达到目标值时，可通过清除定时器停止运动<br> 4、当定义函数多处相同时，可封装为一个函数，用不同参数调用，尽量少传递相同的参数<br> <script type="text/javascript"> window.onload=function(){ var oDiv1=document.getElementById('div1'); oDiv1.onmouseover=function(){ starMove(0); }; oDiv1.onmouseout=function(){ starMove(-200); }; }; //匀速运动 var timer1=null; speed=0; function starMove(iTarget){ var oDiv1=document.getElementById('div1'); clearInterval(timer1); timer1=setInterval(function(){ if(oDiv1.offsetLeft==iTarget){ clearInterval(timer1); }else{ if(iTarget<0){ speed=-10; }else{ speed=10; } oDiv1.style.left=oDiv1.offsetLeft+speed+'px'; } },30); }

查看全部

5 采集收起来源：JS速度动画
2018-03-22
qq_小天狼星_0

缓冲运动： 1、速度的定义： var speed=(目标值-当前值（offset）)/20； 2、取整函数：向下取整：Math.floor(3.55);//3.55是取整的数值，结果为：3 向上取整：Math.ceil(3.35);//结果为：4 3、由于运算出现浮点数，而px无法显示小数值，所以需要取整速度的取整判断： speed=speed>0?Math.ceil(speed):Math.floor(speed);// 条件操作位这个表达式的意思是如果speed大于0（关系表达式返回true），则将Math.ceil(speed)向下去整赋值给 speed，反之则将Math.floor(speed)向上去整赋值给 speed

查看全部

0 采集收起来源：JS缓冲动画
2018-03-22
名字太难听_不改行不行

obj.style.width=obj.style['width']

查看全部

0 采集收起来源：任意属性值（一）
2016-02-23
名字太难听_不改行不行

利用getStyle（）来解决offsetWidth无法获取边框的bug

查看全部

0 采集收起来源：任意属性值（一）
2016-02-23
名字太难听_不改行不行

function getStyle（obj,attr）{ if(obj.currentStyle){reture obj.currentStyle[attr];}//IE elae{return getComputedStyle(obj,false)[attr];}}//火狐获取浏览器实际标准样式的代码 function getStyle(obj,attr){ if (obj.currentStyle) { return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } }

查看全部

0 采集收起来源：获取样式
2016-02-23
名字太难听_不改行不行

所有的公共属性在变换的时候都是公用的，为了避免出现相互争抢的问题，要用数组区分，ali[].public=...

查看全部

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

首页上一页 102 103 104 105 106 107 108 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.您至少已经具备JavaSript的知识。2.您已经具备一些开发经验。

老师告诉你能学到什么？: 1.使用定时器实现简单动画。2.如何一步步封装库。2.培养编程的思想。

微信扫码，参与3人拼团

热搜

最近搜索清空

JS动画效果