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

功能残缺，添加opacity时候无法正常添加上，望大侠帮忙修改下，总得来位大侠来拯救小弟吧，慕课的暖风吹过来。。~小弟在此召唤啊啊啊啊啊啊啊啊啊啊！！！

<!--HTML
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #wrap{
            width: 200px;
            height: 100px;
            opacity:1;
            filter: alpha(opacity:100);
            background-color:#7affdd;
        }
    </style>
</head>
<script src="JS--Animation-10.js"></script>
<body>
    <div id="wrap"></div>
</body>
</html>

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
JavaScript
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/**
 * Created by Administrator on 2016/1/6.
 */
window.onload=function(){
    var div = document.getElementById('wrap');
    div.onmouseover=function(){
        setMove(div,{width:500,height:400,opacity:.5});
    }
    div.onmouseout=function(){
        setMove(div,{width:200,height:100});
    }
}

function setMove(obj,json,fu){
    var flas =true;
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        for(var sty in json){
            var ico = 0;
            if(sty=='opacity'){
                ico = Math.random(parseFloat(setTmo(obj,sty))*100);
            }else{
                ico = parseInt(setTmo(obj,sty));
            }
            var speed = (json[sty] -ico)/5;
            speed = speed>0? Math.ceil(speed):Math.floor(speed);
            if(json[sty] !=ico){
                flas =false;
            }
            if(json[sty]=='opacity'){
                obj.style.filter='alpha(opacity'+(ico+speed)+"px";
                obj.style.opacity=(ico+speed)/100;
            }else{
                obj.style[sty]=ico+speed+"px";
            }
            if(flas){
                clearInterval(obj.timer);
                if(fu){
                    fu();
                }
            }
        }
    },30)
}

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

蛋疼少年的和谐青春

2016-01-08

源自：JS动画效果 6-2

关注问题我要回答

528

操作

收起

2 回答

伊望岁月回答被采纳 +3 积分
2016-01-08

window.onload=function(){
    var div = document.getElementById('wrap');
    div.onmouseover=function(){
        setMove(div,{width:500,height:400,opacity:50});
    }
    div.onmouseout=function(){
        setMove(div,{width:200,height:100,opacity:100});
    }
}

function setMove(obj,json,fu){
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        var flas =true;
        for(var sty in json){
            var ico = 0;
            if(sty=='opacity'){
                ico = Math.round(parseFloat(setTmo(obj,sty))*100);
            }else{
                ico = parseInt(setTmo(obj,sty));
            }
            var speed = (json[sty] -ico)/5;
            speed = speed>0? Math.ceil(speed):Math.floor(speed);
            if(json[sty] !=ico){
                flas =false;
            }
            if(sty=='opacity'){
                obj.style.filter='alpha(opacity:'+(ico+speed)+")";
                console.log((ico+speed)/100);
                obj.style.opacity=(ico+speed)/100;
            }else{
                obj.style[sty]=ico+speed+"px";
            }
            if(flas){
                clearInterval(obj.timer);
                if(fu){
                    fu();
                }
            }
        }
    },30);
}

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

错误太多了，首先你的opacity的取值是（0到100）才对，

然后ico = Math.round(parseFloat(setTmo(obj,sty))*100);你写成了Math.random，

if(sty=='opacity'){写成了if(json[sty]=='opacity'){

obj.style.filter='alpha(opacity:'+(ico+speed)+")";写成了obj.style.filter='alpha(opacity'+(ico+speed)+"px";

2 回复有任何疑惑可以回复我~

收起回答

蛋疼少年的和谐青春提问者

非常感谢您这么详细的指出我的错误，谢谢您，我以后也会多多注意细节方面。辛苦啦！！嘿嘿感谢大侠~！！！！！

2016-01-08 回复有任何疑惑可以回复我~

产品经理不是经理
2016-01-08

<!--HTML
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #wrap{
            width: 200px;
            height: 100px;
            opacity:1;
            filter: alpha(opacity:100);
            background-color:#7affdd;
        }
    </style>
</head>
<body>
    <div id="wrap"></div>
</body>

 
<script type="text/javascript">
window.onload=function(){
    var div = document.getElementById('wrap');
    div.onmouseover=function(){
        setMove(div,{width:500,height:400,opacity:.5});
    }
    div.onmouseout=function(){
        setMove(div,{width:200,height:100});
    }
}
 
function setMove(obj,json,fu){
    var flas =true;
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        for(var sty in json){
            var ico = 0;
            if(sty=='opacity'){
                ico = Math.random(parseFloat(setTmo(obj,sty))*100);
            }else{
                ico = parseInt(setTmo(obj,sty));
            }
            var speed = (json[sty] -ico)/5;
            speed = speed>0? Math.ceil(speed):Math.floor(speed);
            if(json[sty] !=ico){
                flas =false;
            }
            if(json[sty]=='opacity'){
                obj.style.filter='alpha(opacity'+(ico+speed)+"px";
                obj.style.opacity=(ico+speed)/100;
            }else{
                obj.style[sty]=ico+speed+"px";
            }
            if(flas){
                clearInterval(obj.timer);
                if(fu){
                    fu();
                }
            }
        }
    },30)
}
 
function setTmo(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj,false)[attr];
    }
}
</script></html>

0 回复有任何疑惑可以回复我~

收起回答

蛋疼少年的和谐青春提问者

鼠标移动上去后，透明度还是没有改变呢，大侠。。。。

2016-01-08 回复有任何疑惑可以回复我~