<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div{ width:100px;height: 100px;background: red;opacity:0.3;filter: Alpha(opacity:30); border:1px solid cornflowerblue; } </style> <script> //获取非行间样式方法,if...else...是解决兼容性问题 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } } //开始运动的方法 // function startMove(obj,attr,iTarget,fnEnd){ //obj为需要运动的元素,格式为aDiv或input....获取到的元素 //json是元素需要变化的属性和值,比如宽度,高度,透明度等,格式为{width:300,height:300,opacity:60;...} //fnEnd是元素的属性和值变化后要执行的函数,格式为function(){} function startMove(obj,json,fnEnd){ clearInterval(obj.timer);//obj.timer是开启多个定时器 obj.timer=setInterval(function(){ var bStop=true; for(var attr in json){//循环json里需要改变的属性, var cur=0;//当前元素的值 //if判断是当需要改变的值为透明度时,做的兼容性, // 当谷歌,FF时透明度为小数,需四舍五入取整当是IE时,是整数,用else if(attr=='opacity'){ cur=Math.round(parseFloat(getStyle(obj,attr))*100) }else{ cur=parseInt(getStyle(obj,attr)); } var speed=(json[attr]-cur)/6;//缓冲速度的改变,除的数越大,改变的速度越慢,可以自己改变 speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur!=json[attr]){ bStop=false; } if(attr=='opacity'){ obj.style.filter='alpha(opacity:)'+(cur+speed)+')'; obj.style.opacity=(cur+speed)/100; }else{ obj.style[attr]=cur+speed+'px'; } } if(bStop){ clearInterval(obj.timer) if(fnEnd){fnEnd();}//当元素的改变都完成时执行的函数 } },30) } window.onload=function(){ var div=document.getElementsByTagName("div")[0]; var input1=document.getElementsByTagName("input")[0]; var input2=document.getElementsByTagName("input")[1]; input1.onclick=function(){ startMove(div,{width:300,height:300,opacity:100,fontSize:50,borderWidth:10}) } input2.onclick=function(){ startMove(div,{width:300},function(){ startMove(div,{height:300},function(){ startMove(div,{opacity:100}) }) }) } } </script> </head> <body> <input type="button" value="DIV同时变宽和变高和透明度"/> <input type="button" value="DIV先变宽后变高后透明度改变"/> <br/><br/> <div>asdfsdaf</div> </body> </html>
完美运动框架(可以改变元素的透明度,宽,高,top,left,字体大小等)
最新推荐文章于 2021-07-07 11:04:35 发布