JavaScript创建运动框架和Jquery动画函数的方法
封装好的运动框架Move(obj,attr,iTarget),可直接调用:
可用于设置width、border、fontSize、marginLeft、opacity等许多常见属性值的变速变化,实现各种有趣效果。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | /**************** * * IE-BUG: * 在IE中,设置opacity属性时,元素样式中需要设置opacity属性,才能读取到opacity值。 * * obj:元素对象。 attr:用引号包围的属性名。 iTarget:属性目标值。 * *****************/ function Move(obj,attr,iTarget){ clearInterval(obj.timer);//关闭前一个定时器,解决对同个对象同时调用多个Move()时,定时器叠加问题。使用obj.timer给每个调用Move()的对象赋予各自的定时器,防止多个对象同时调用Move()时,同用一个定时器,而导致相关干扰问题。 obj.timer=setInterval(function(){ var cur=0;//创建一个变量,用于存储 attr属性每时每刻的值 if(attr=="opacity"){ //针对在FF中opacity属性值为浮点数值问题,将属性值 四舍五入、转换成浮点型。乘以100,使opacity属性值与IE统一为百分数 cur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ cur=parseInt(getStyle(obj,attr));//将除opacity外的属性(width/fontSize/MarginLeft等)的初始值 转换为整型 } var speed=(iTarget-cur)/10;//创建 递减的速度speed变量。实现属性值的变速改变 speed=speed>0?Math.ceil(speed):Math.floor(speed);//取整,解决浏览器忽略小于1px的数值 导致运动结束时,离目标值Itarget少几个像素的问题 if(iTarget==cur){//当目标值等于目标值时,结束定时器 clearInterval(obj.timer); }else{ cur+=speed;//当前值cur 加上 递减的速度值speed if(attr=="opacity"){ // 分别对IE和FF设置opacity属性值 obj.style.filter="alpha(opacity:"+cur+")"; //for IE obj.style.opacity=cur/100; //for FF }else{ obj.style[attr]=cur+"px"; //给指定属性attr 添加值cur+speed } } },30); } //getStyle()函数 用于兼容IE和FF:获取 对象的 非行间样式中的属性的值。 obj:元素对象。 name:属性名。 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name];//for IE }else{ return getComputedStyle(obj,false)[name];//for FF } } |
当然,你用Jquery库的话,就是一句话。
jQuery 动画 – animate() 方法:
1 | $(selector).animate({params},speed,callback); |
实例:
1 2 3 | $("button").click(function(){ $("div").animate({left:'250px'}); }); |
生成动画的过程中可同时使用多个属性:
1 2 3 4 5 6 7 8 | $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); }); |
建议大家使用jquery,能够解决兼容性问题,调用更加方便快捷。
Js千分位格式化金额数字的方法 CSS中的Expression行为详解
嗯,jquery是个很好用的js库。