10-18关于改变对象的移动、淡入淡出、变大变小等功能函数整合

一、整合:

<script>
function getCss(obj,val){//封装兼容性获取CSS样式属性,obj为获取的对象,val为要获取的样式名
if(getComputedStyle(obj,true)[val]){
return getComputedStyle(obj,true)[val];
}else{
return obj.currentStyle[val];
}
}//解决用offsetxx来设置变化的bug 要注意函数返回的是字符串类型,若要使用返回值要转换回number类型
window.οnlοad=function(){//页面载入时调用以下js代码
var divs=document.getElementsByTagName('div');//获取页面中的div
var timer=null;
function move(obj,name,target){//对对象的css样式逐渐改变的函数整合
clearInterval(obj.timer);//使用定时器前先清掉定时器,防止出现bug
obj.timer=setInterval(function(){//timer定时器每隔30毫秒来调用此方法
if(name=='opacity'){//如果想要改变的样式是透明度
var op = parseFloat(getCss(obj,name))*100;
//用getCss方法获取对象原本的name样式,这里是opacity
var speed=(target-op)/10;
//用speed变量来控制透明度改变的速度,目标值减对象的透明值
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//对speed取整,若speed值大于0,让speed向上取整,否则向下取整
//关于取整 例23.3 math.ceil(23.3)=24,math.floor(23.3)=23,math.round是四舍五入
op += speed;//op为每次设置的透明度值
obj.style.filter='alpha(opacity='+op+')';//兼容IE
obj.style.opacity=op/100;
//兼容非ie
}else{//如果设置的不是透明度,是关于像素数值改变的(如width,height,borderwidth等),则调用下面的方法
var speed=(target-parseInt(getCss(obj,name)))/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);//同上
obj.style[name]=parseInt(getCss(obj,name))+speed+'px';
}
},30);
}
}
</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值