求大神帮忙找错,鼠标移入透明值0.13,移出为0..14; 误差超大,不知道哪里出错了
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>任意属性值</title>
<style type="text/css">
boy,
div{margin:0; padding:0;}
#div1{
width:400px;
height:400px;
border:2px solid black;
margin-bottom:20px;
background:yellow;
filter:alpha(opacity:30); /*IE浏览器设置透明度*/
opacity:0.3; /*火狐、谷歌浏览器*/
}
</style>
</head>
<body>
<div id ="div1"></div>
</body>
<script>
window.onload = function(){
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function(){
startMove(this,'opacity',100); //this为鼠标在哪的对象
}
oDiv.onmouseout = function(){
startMove(this,'opacity',30); //鼠标离开透明度变为30;
}
}
var timer = null;
function startMove(obj,attr,iTarget){ //传入对象、属性、目标值
clearInterval(obj.timer); //清除当前定时器
obj.timer = setInterval(function(){
var icur = 0; //获取当前值
if(icur == 'opacity'){ //属性为透明度时
icur = Math.round(parseFloat(getStyle(obj,attr))*100);
// Math.round()函数为四舍五入
}
else{ //属性为宽高时
icur = parseInt(getStyle(obj,attr));
//parseInt()取整函数
}
var speed = (iTarget-icur)/8;
speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);
if(icur == iTarget){
clearInterval(obj.time);
}
else{
if(attr == 'opacity'){ //是属性是否为透明度
obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
//IE
obj.style.opacity = (icur+speed)/100; //缓冲速度
//Forefox
}else{
obj.style[attr] = icur + speed +'px';
//属性为宽高字体大小时
}
}
},30)
}
function getStyle(obj,attr){ //获取样式
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
</script>
</html>