                        課程
                    
                        /前端開發
                        
                            /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

關注問題我要回答

1021

操作

收起

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呀。