一、动画函数初版:左右匀速移动目标距离
<script> //封装移动元素函数:任意一个元素(element)左右匀速移动目标距离(target) function animate(element,target){ //先清理定时器 clearInterval(element.timeId); element.timeId=setInterval(function(){ //获取div的当前位置--数字类型,没有px var current=element.offsetLeft; //div每次移动多少像素 var step=10; //判断当前位置和目标位置的大小 step=current<target?step:-step; //每次移动后的距离 current+=step; //判断当前移动后的位置是否到达目标位置 if(Math.abs(target-current)>Math.abs(step)){ //目标位置和当前位置的距离大于步数,继续移动 element.style.left=current+"px"; }else{ //目标位置和当前位置的距离大于步数,清除定时器 clearInterval(element.timeId); //目标位置和当前位置的距离大于步数,直接移动到目标位置 element.style.left=target+"px"; } },20); } </script> <!-- 测试 --> <input type="button" value="移动400" id="btn1"> <input type="button" value="移动800" id="btn2"> <div id="dv" style="width: 100px;height: 100px;background: red;position: absolute;left: 0;top:20px;"></div> <script> document.getElementById("btn1").onclick=function(){ animate(document.getElementById("dv"),400); }; document.getElementById("btn2").onclick=function(){ animate(document.getElementById("dv"),800); }; </script>
二、动画函数升级:左右缓动效果移动目标距离
<script> //封装移动元素函数:任意一个元素(element)左右缓动效果移动目标距离(target) function animate(element,target){ clearInterval(element.timeId); element.timeId=setInterval(function(){ var current=element.offsetLeft; //利用这个可以制造缓动效果 var step=(target-current)/10; //判断步数是否大于0,即是往左移动还是往右移动,大于0必须向上取整,不然永远到达不了目标值 step=step>0?Math.ceil(step):Math.floor(step); current+=step; element.style.left=current+"px"; if(current==target){ clearInterval(element.timeId); } //测试代码 console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step); },20) } </script> <!-- 测试 --> <input type="button" value="移动400" id="btn1"> <input type="button" value="移动800" id="btn2"> <div id="dv" style="width: 100px;height: 100px;background: red;position: absolute;left: 0;top:20px;"></div> <script> document.getElementById("btn1").onclick=function(){ animate(document.getElementById("dv"),400); }; document.getElementById("btn2").onclick=function(){ animate(document.getElementById("dv"),800); }; </script>
三、如何获取获取任意一个元素的任意一个样式属性的值
<script> //获取任意一个元素的任意一个样式属性的值----->封装函数 //参数element------->元素 //参数attr------>元素的某个属性 //注意:1.判断是否支持某属性,直接window.getComputedStyle?不用(),不支持返回的是undefined,即false //注意:2.访问对象属性的方法点语法或者中括号,此处用中括号["属性"] function getStyle(element,attr){ return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]; } </script> <div id="dv" style="width: 100px;height: 100px;background: red;position: absolute;left: 0;top:20px;"></div> <script> //原因,如果在style里面有个left属性值(没有设置position的情况下),利用offset是0,获取不到这个值 //所以可以使用下面两个属性:(支持不一样的浏览器) //1.getComputedStyle(element,null),返回一个对象 var dv=document.getElementById("dv"); console.log(window.getComputedStyle(dv,null)); //2.element.currentStyle,返回一个对象 console.log(dv.currentStyle); </script>
四、动画函数升级:增加一个任意的属性
<script> //封装动画函数:增加一个任意的属性----添加参数attr //参数element------->元素 //参数attr------->属性(用双引号) //参数target------->目标值 function animate(element,attr,target){ clearInterval(element.timeId); element.timeId=setInterval(function(){ //获取一个元素的任意属性,必须装换为整数,而且是parseInt()方法 var current=parseInt(getStyle(element,attr)); var step=(target-current)/10; step=step>0?Math.ceil(step):Math.floor(step); current+=step; //把current赋值给这个元素的值 element.style[attr]=current+"px"; if(current==target){ clearInterval(element.timeId); } //测试代码: console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step); },20) } //获取一个元素的任意属性的封装函数 function getStyle(element,attr){ return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]; } </script> <input type="button" value="动画" id="btn"> <div id="dv" style="width: 100px;height: 100px;background: red;position: absolute;left: 0;top:50px;"></div> <script> document.getElementById("btn").onclick=function(){ animate(document.getElementById("dv"),"width",500) }; </script>
五、动画函数升级:增加多个任意的属性
<script> //封装动画函数:增加多个任意的属性----使用json对象 function animate(element,json){ clearInterval(element.timeId); element.timeId=setInterval(function(){ //遍历json对象 for(var attr in json){ //获取元素这个属性当前的值 var current=parseInt(getStyle(element,attr)); //当前的属性对应的目标值 var target=json[attr]; var step=(target-current)/10; step=step>0?Math.ceil(step):Math.floor(step); current+=step; element.style[attr]=current+"px"; } //判断是否全部达到目标,达到目标则清除定时器等于current==target if(current==target){ clearInterval(element.timeId); } //测试代码 console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step); },20) } function getStyle(element,attr){ return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.current[attr]; } </script> <!-- 测试 --> <input type="button" value="动画" id="btn"> <div id="dv" style="width: 100px;height: 100px;background: red;position: absolute;left: 0;top:50px;"></div> <script> document.getElementById("btn").onclick=function(){ animate(document.getElementById("dv"),{"width":200,"height":200,"top":100,"left":100}); }; </script>
六、动画函数升级:增加回调函数
<script> //封装动画函数:增加回调函数----fn参数 function animate(element,json,fn){ clearInterval(element.timeId); element.timeId=setInterval(function(){ for(var attr in json){ var current=parseInt(getStyle(element,attr)); var target=json[attr]; var step=(target-current)/10; step=step>0?Math.ceil(step):Math.floor(step); current+=step; element.style[attr]=current+"px"; if(current==target){ clearInterval(element.timeId); //前提,所有的属性都到达目标位置才能使用这个函数 if(fn){ fn(); } } //测试代码 console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step); } },20) } function getStyle(element,attr){ return window.getComputedStyle?window.getComputedStyle(element)[attr]:element.currentStyle[attr]; } </script> <!-- 测试 --> <input type="button" value="动画" id="btn"> <div id="dv" style="width: 100px;height: 100px;background: red;position: absolute;left: 0;top:50px;"></div> <script> document.getElementById("btn").onclick=function(){ animate(document.getElementById("dv"),{"top":100,"left":100},function(){ animate(document.getElementById("dv"),{"width":200,"height":200,}) }); }; </script>
七、动画函数升级最终版:增加层级和透明度
<script> //封装动画函数:增加层级和透明度-------json对象可以传入z-index和opacity function animate(element,json,fn){ clearInterval(element.timeId); element.timeId=setInterval(function(){ for(var attr in json){ //判断attr这个属性 if(attr=="opacity"){//是opacity //获取当前属性的透明度,并且放大100倍 var current=getStyle(element,attr)*100 //目标的透明度放大100倍 var target=json[attr]*100 var step=(target-current)/10; step=step>0?Math.ceil(step):Math.floor(step); current+=step; //变化后的透明度再缩小100倍 element.style[attr]=current/100; }else if(attr=="zIndex"){//是zIndex element.style[attr]=json[attr]; }else{//普通的属性 var current=parseInt(getStyle(element,attr)); var target=json[attr]; var step=(target-current)/10; step=step>0?Math.ceil(step):Math.floor(step); current+=step; element.style[attr]=current+"px"; } if(current==target){ clearInterval(element.timeId); if(fn){ fn(); } } //测试代码 console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step); } },20) } function getStyle(element,attr){ return window.getComputedStyle?window.getComputedStyle(element)[attr]:element.currentStyle[attr]; } </script> <input type="button" value="动画" id="btn"> <div id="dv" style="width: 100px;height: 100px;background: red;position: absolute;left: 0;top:50px;"></div> <script> document.getElementById("btn").onclick=function(){ animate(document.getElementById("dv"),{"top":100,"left":100},function(){ animate(document.getElementById("dv"),{"width":200,"height":200,},function(){ animate(document.getElementById("dv"),{"opacity":0.2},function(){ animate(document.getElementById("dv"),{"top":0,"left":0,"opacity":1,"zIndex":-1}) }) }); }); }; </script>