<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>封装改变样式的函数</title>
<style>
#div1{width:200px;height:100px;background:#f0f;filter:alpha(opacity:0.3);opacity:0.3;}
</style>
</head>
<body>
<button id="btn1" οnclick="startMove(document.getElementById('div1'),'width','700')">改变宽度</button>
<button id="btn2" οnclick="startMove(document.getElementById('div1'),'opacity','100')" >改变opacity</button>
<div id="div1"></div>
<script>
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,attr,iTarget){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var iCur = 0;
if(attr=="opacity"){
// parseInt() 函数可解析一个字符串，并返回一个整数。
// parseFloat() 函数可解析一个字符串，并返回一个浮点数。
iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
}else{
iCur=parseInt(getStyle(obj,attr));
}
var iSpeed = (iTarget-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(iCur==iTarget){
clearInterval(obj.timer);
}else{
if(attr=="opacity"){
obj.style.filter="alpha(opacity:"+(iCur+iSpeed)+")";
obj.style.opacity=(iCur+iSpeed)/100;
}else{
obj.style[attr]=iCur+iSpeed+'px';
}
}
},30)
}
</script>
</body>
</html>
扫一扫
221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
