可用于设置width、border、fontsize、marginleft、opacity等许多常见属性值的变速变化,实现各种有趣效果。
兼容ie和ff。
复制代码 代码如下:
/****************
*
* 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
}
}
