//elem是需要修改的元素,target是修改的元素需要达到的目标,change_style是需要修改的元素的属性
function move(elem, target, change_style) {
//每一次开始的时候都清除上一次的定时器
clearInterval(elem.timer);
elem.timer = setInterval(function() {
//根据不同的浏览器获取当前所需的样式
var iCur = null,iSpeed = null;
if(window.getComputedStyle) {
iCur = window.getComputedStyle(elem, null)[change_style]
} else {
iCur = elem.currentStyle[change_style];
}
//判断要改变的属性是否是透明,透明传参进来的时候要相应的把值乘100,后面修改的时候也相应的有不同处
iCur = change_style =='opacity'?parseFloat(iCur) * 100 : parseInt(iCur)
//将我们想要达到的元素属性的目标的值与当前的元素的属性的值相减,然后除以一个数字(例如本例子中的7),就是我们想要的到的样式改变的速度
iSpeed = (target - iCur) / 7
//通过判断iSpeed的值得正负性来判断是向下还是向下取整
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iCur == target) {
clearInterval(elem.timer)
} else {
elem.style[change_style] = change_style =='opacity' ?(iCur + iSpeed) / 100: iCur + iSpeed+"px";
}
}, 30)
}
单次匀速改变单个元素的单个属性的封装函数.js
最新推荐文章于 2024-01-25 11:01:22 发布