封装好的运动框架Move(obj,attr,iTarget),可直接调用:
可用于设置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
}
}
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 无印良品.1999-私藏三首·原创相对论(EP)【滚石】【WAV+CUE】
- Merryland《Merryland》[FLAC/分轨][170.22MB]
- 庄锭欣 ELKIE《没有你的未来》[320K/MP3][15.78MB]
- 庄锭欣 ELKIE《没有你的未来》[FLAC/分轨][36MB]
- TchaikovskySwanLake,Op.20柴可夫斯基天鹅湖(2013)SACD[Hi-Res]
- 24bit达人艺典《琴歌终极版》整轨WAV+CUE
- 黑鸭子.2005-《发烧DSD》柏菲[WAV分轨]
- 群星.1990-电影看板·人间道【宝丽金】【WAV+CUE】
- 周殷廷.2024-TO.WHOM.IT.MAY.CONCERN【环球】【FLAC分轨】
- 草蜢.1997-三人世界精选17首【宝丽金】【WAV+CUE】
- 【古琴音乐】管平湖《广陵散》2004[FLAC+CUE]
- 【中国民乐】《少数民族器乐·苗岭的早晨》2004[WAV+CUE]
- 【中国音乐】盛中国《新疆之春》2004[FLAC+CUE]
- 群星《音你而来 第8期》[320K/MP3][44.64MB]
- 群星《音你而来 第8期》[FLAC/分轨][121.21MB]