JS动画效果_学习笔记

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

JS动画效果

最热最新

慕粉3473542 03:16

运动的类型

查看全部

0 采集收起来源：JS动画效果课程介绍
2016-08-17
Onlysupcarry

过了这个爱做梦的年纪，心里还是经常想起。密密麻麻让人恐惧，多么希望那么爱笑的你，时时刻刻在我怀里。

查看全部

0 采集收起来源：获取样式
2016-08-17
慕妹3865153 03:51

offset当前位置的值

查看全部

0 采集收起来源：JS动画效果课程介绍
2016-08-16
慕粉3754979

window.onload=function(){ var odiv=document.getElementById('dv1'); odiv.onmouseover=function(){ startmo(); } odiv.onmouseout=function(){ startmo1() } } var timmer=null; function startmo(){ clearInterval(timmer); var odiv=document.getElementById('dv1'); timmer=setInterval(function(){if (odiv.offsetLeft==40) { clearInterval(timmer); } else{ odiv.style.left=odiv.offsetLeft+1+'px';} },10) } function startmo1(){ clearInterval(timmer); var odiv=document.getElementById('dv1'); timmer=setInterval(function(){if (odiv.offsetLeft==-190) { clearInterval(timmer); } else{ odiv.style.left=odiv.offsetLeft-1+'px';} },10) }

查看全部

0 采集收起来源：JS速度动画
2016-08-16
慕白不白

//获取样式的函数封装 function getStyle(obj,style){ if(obj.currentStyle){ return obj.currentStyle[style]; }else{ return getComputedStyle(obj,null)[style]; } }

查看全部

0 采集收起来源：获取样式
2016-08-16
慕白不白

//多物体透明度 <script> window.onload=function(){ var adiv=document.getElementsByTagName("div"); for(var i=0;i<adiv.length;i++){ adiv[i].alpha=30; adiv[i].onmouseover=function(){ startMove(this,100); } adiv[i].onmouseout=function(){ startMove(this,30); } } } var alpha=30; function startMove(obj,target){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed=0; if(obj.alpha>target){ speed=-10; }else{ speed=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>

查看全部

0 采集收起来源：JS多物体动画
2018-03-22
慕白不白

多物体运动 for循环来为每一个TagNameList[i]添加事件并添加属性来区分各自的定时器(用于取消) 利用参数中的this来指定所选择的当前元素多物体不要共用一个值,在对象上定义一个单独的属性保持值存在多项共用一个值，并且这个值会发生改变时，最好单独给赋值，避免出现争用的情况。 <script> window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ // 给每一个li设置一个timer，才不会致使他们去抢timer aLi[i].timer=null; aLi[i].onmouseover=function(){ startMove(this,400); }; aLi[i].onmouseout=function(){ startMove(this,200) } } var oDivLi=document.getElementsByTagName('div'); for(var j=0;j<oDivLi.length;j++){ oDivLi[j].timer=null; oDivLi[j].alpha=30; oDivLi[j].onmouseover=function(){ startMove1(this,100); }; oDivLi[j].onmouseout=function(){ startMove1(this,30); } } };

查看全部

0 采集收起来源：JS多物体动画
2018-03-22
慕白不白

window.onload=function(){ var share=document.getElementById("share"); share.onmouseover=function(){ starMove(0); }; share.onmouseout=function(){ starMove(-100); }; } var timer = null; var alpha =30; function starMove(iTarget){ var share=document.getElementById("share"); clearInterval(timer); var speed=(iTarget-share.offsetLeft)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); /*var speed=0; if(share.offsetLeft>iTarget){ speed=-10; } else{ speed=10; }*/ /* 

查看全部

0 采集收起来源：JS缓冲动画
2018-03-22
慕白不白

透明度运动 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>

查看全部

1 采集收起来源：JS透明度动画
2018-03-22
慕白不白

<script> window.onload=function(){ var oDiv=document.getElementById('div1'); oDiv.onmouseover=function(){ startMove(0); } var timer=null; function startMove(iTarget){ clearInterval(timer); 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
慕UI5360626

window.onload=function(){ var share=document.getElementById("share"); share.onmouseover=function(){ starMove(0); }; share.onmouseout=function(){ starMove(-100); }; } var timer = null; var alpha =30; function starMove(iTarget){ var share=document.getElementById("share"); clearInterval(timer); var speed=(iTarget-share.offsetLeft)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); /*var speed=0; if(share.offsetLeft>iTarget){ speed=-10; } else{ speed=10; }*/ /* 匀速运动 */ timer=setInterval(function(){ if(share.offsetLeft==iTarget||share.offsetLeft>0||share.offsetLeft<-100){ clearInterval(timer); if(share.offsetLeft>0)share.style.left=0+'px'; if(share.offsetLeft<-100)share.style.left=-100+'px'; } else{ share.style.left=share.offsetLeft+speed+'px'; } },30); }

查看全部

0 采集收起来源：JS缓冲动画
2018-03-22
Plinkchan 09:29

if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj, false)[attr]; }

查看全部

0 采集收起来源：获取样式
2016-08-14
这偌大的城市

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

查看全部

0 采集收起来源：JS动画效果课程介绍
2016-08-12
侬0O0侬

<script> window.onload=function(){ var oDiv=document.getElementById('div1'); oDiv.onmouseover=function(){ startMove(0); } var timer=null; function startMove(iTarget){ clearInterval(timer); 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
伏地炸毛 03:29

运动框架实现思路

查看全部

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