求大神帮忙找错，鼠标移入透明值0.13，移出为0..14; 误差超大，不知道哪里出错了-慕课网

求大神帮忙找错，鼠标移入透明值0.13，移出为0..14; 误差超大，不知道哪里出错了

来源：4-4 任意属性值（二）

梦幻星空web

2016-03-11 13:44

<!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>

写回答关注

1回答

qq_Ya_0

2016-03-11 14:08:10

已采纳

timer

4 0

Eason_... 回复梦幻星空we...

还有,前面的样式，body写成了boy... <style type="text/css"> boy, div{margin:0; padding:0;}

2016-04-04 14:34:08

共 4 条回复 >