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

可以帮忙看下代码吗

<!DOCTYPE html>

<html>

<head>

<title>Title</title>

margin: 0;

padding: 0;

}

div {

width: 1000px;

height: 300px;

background: #0e90d2;

filter: alpha(opacity:30);

opacity: 0.3

}

</style>

</head>

<body>

<div>

</div>

window.onload = function () {

var oDiv = document.getElementsByTagName('div')[0],

timer = null;

oDiv.onmouseover = function () {

startMove('opacity',100);

}

oDiv.onmouseout = function () {

startMove('opacity',30);

}

function startMove(attr,iTarget) {

clearInterval(timer);

timer = setInterval(function(){

var oDiv = document.getElementsByTagName('div')[0],

var icur=0;

if(attr=='opacity'){

icur=Math.round(parseFloat(getStyle(oDiv,attr))*100);

}

else{

icur=parseInt(getStyle(oDiv,attr));

}

var speed=(iTarget-icur)/8;

speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(icur==iTarget){

clearInterval(timer);

}

else{

if(attr=='opacity'){

icur+=speed;

oDiv.style.filter='alpha(opacity:'+icur+')';

oDiv.style.opacity=icur/100;

}

else{

oDiv.style[attr]=icur+speed+'px'

}

}, 30)

}

//获取css样式

function getStyle(obj, attr) {

if (obj.currentStyle) {

return obj.currentStyle[attr];

}

else {

return getComputedStyle(obj, null)[attr];

}

</script>

</body>

</html>

如加入obj参数则

oDiv.onmouseover = function () {

startMove(this,'opacity',100);

}

在这里我不用obj的参数可以么直接默认为oDiv 不知道是不是这个原因？

poudoudou

2016-10-12

源自：JS动画效果 4-4

关注问题我要回答

727

操作

收起

4 回答

黑色秋水
2016-10-21

理论上没什么问题，但是不能应用于多物体运动

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

收起回答

poudoudou 提问者
2016-10-20

谢谢亲的答复但是在不传入obj的参数的情况下之前已经有定义timer=null，因此之后可以开始就可以clearsetinterval 不知道对不对。。

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

收起回答

黑色秋水
2016-10-20

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div {
            width: 1000px;
            height: 300px;
           
            background: #0e90d2;
            filter: alpha(opacity:30);
            opacity: 0.3
       
        }

    </style>
</head>
<body>
<div>

</div>
<script type="text/javascript">
    window.onload = function () {
        var oDiv = document.getElementsByTagName('div')[0],
        
        timer = null;

        oDiv.onmouseover = function () {
            startMove(this,'opacity',100);
        }

        oDiv.onmouseout = function () {
            startMove(this,'opacity',30);
        }
    }    
        


        function startMove(obj,attr,iTarget) {

            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                var oDiv = document.getElementsByTagName('div')[0];
                var icur=0;
                if(attr=='opacity'){
                icur=Math.round(parseFloat(getStyle(oDiv,attr))*100);
                 }
                else{
                 icur=parseInt(getStyle(oDiv,attr));
                }

                var speed=(iTarget-icur)/8;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);
                
                if(icur==iTarget){
                  clearInterval(obj.timer);
                }
                else{
                 if(attr=='opacity'){
                 icur+=speed;
                     oDiv.style.filter='alpha(opacity:'+icur+')';
                     oDiv.style.opacity=icur/100;
                 }
                
                 else{
                 oDiv.style[attr]=icur+speed+'px'
                 }
             }
             }, 30)
         }

    

    //获取css样式
    function getStyle(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        }
        else {
            return getComputedStyle(obj, null)[attr];
        }
    }
</script>
</body>
</html>

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

收起回答

黑色秋水

在你基础上改的：1.你的startMove函数里面第四行，你第三行结尾是个逗号，应该是想同时定义多个变量，那你第四行var就不用写; 2timer问题，参照老师的代码，this是需要传入的，以便将timer绑定在元素对象上，不然函数开始就清除一个未定义的定时器会报错;

2016-10-20 回复有任何疑惑可以回复我~

poudoudou 提问者回复黑色秋水

谢谢亲的答复但是在不传入obj的参数的情况下之前已经有定义timer=null，因此之后可以开始就可以clearsetinterval 不知道对不对。。

2016-10-20 回复有任何疑惑可以回复我~