                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

为什么我将鼠标移动上去后他的值不是到400px，而是到391px从而停下来了？

/**
* Created by Administrator on 2016/1/5.
*/

function setMove(obj,sty,goal){
var div =document.getElementById("wrap");
var timer=null;
timer=setInterval(function(){
var ist = 0
if(sty=='opacity'){
ist=Math.round(parseFloat(setStyle(obj,sty))*100);
}else{
ist=parseInt(setStyle(obj,sty));
}

var speed = (goal-ist)/10;
speed= speed>0? Math.ceil(speed):Math.floor(speed);
if(ist == goal){
clearInterval(timer);
}else{
if(sty=='opacity'){
obj.style.filter='alpha(opacity'+(ist + speed)+')';
obj.style.opacity=(ist + speed)/100;
}else {
obj.style[sty] = ist + speed + "px";
}
}
},30);
}

function setStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}

蛋疼少年的和谐青春

2016-01-05

源自：JS动画效果 5-1

关注问题我要回答

982

操作

收起

1 回答

李晓健回答被采纳 +3 积分
2016-01-05

<html>
<head>
    <title> 事件</title>
    <meta charset="utf-8">
    <title>111111111</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        div{
            width: 200px;
            height: 200px;
            background-color: #0B5DE5;
        }
    </style>
    <script>
        function setMove(obj,sty,goal){
            var div =document.getElementById("wrap");
            var timer=null;
            timer=setInterval(function(){
                var ist = 0
                if(sty=='opacity'){
                    ist=Math.round(parseFloat(setStyle(obj,sty))*100);
                }else{
                    ist=parseInt(setStyle(obj,sty));
                }

                var speed = (goal-ist)/10;
                speed= speed>0? Math.ceil(speed):Math.floor(speed);
                if(ist == goal){
                    clearInterval(timer);
                }else{
                    if(sty=='opacity'){
                        obj.style.filter='alpha(opacity'+(ist + speed)+')';
                        obj.style.opacity=(ist + speed)/100;
                    }else {
                        obj.style[sty] = ist + speed + "px";
                    }
                }
            },30);
        }

        function setStyle(obj,attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }else{
                return getComputedStyle(obj,false)[attr];
            }
        }
    </script>
</head>
<body>
<div id="div"></div>
<script>
    var div = document.getElementById('div');
    div.onmouseover = function(){
        setMove(this,'width',400);
    }
</script>
</body>
</html>

是400呀。