重点:DOM对象要动,跟样式相关,和像素(px)还有透明度相关的一些属性值发生变化(left top width height opacity)
封装代码如下:
function objMove(obj,json){
clearInterval(obj.timer);
var flag=true;//假设所有属性都达到了目标值
obj.timer=setInterval(function(){
for(var attr in json){//要改变的属性以及目标值以json对象作为参数进行传递
var target=json[attr];
if(attr==“opacity”){
var cur=parseInt(getstyle(obj,attr)*100);//opacity取值是小数,切记乘100
}else{
var cur=parseInt(getstyle(obj,attr));
}
var speed=(target-cur)/8;//分母取值一般6到10
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(attr==“opacity”){
obj.style.opacity=(cur+speed)/100;
obj.style.filter=“alpha:opacity(”+(cur+speed)+")";
}else{
obj.style[attr]=cur+speed+“px”;
}
if(cur!=target){
flag=false;
}
}
if(flag){//通过flag的值判断是否清楚当前对象的定时器
clearInterval(obj.timer);
}
},20);
}
//获取DOM对象的属性
function getstyle(obj,attr){
if(window.getComputedStyle){
return getComputedStyle(obj,null)[attr];
}
return obj.currentStyle[attr];
}
测试代码:
javascript关于DOM对象运动的封装函数
最新推荐文章于 2021-06-28 21:16:35 发布