问答详情
源自：4-1 JS多物体动画

综合了透明和多物体运动效果但是还是有点问题能帮我看一下吗？

<title>多物体运动</title>

<style>

body,ul,li{

padding:0;

margin:0;

}

ul,li{

list-style:none;

}

ul li{

width:200px;

height:100px;

background:#FF0;

margin-bottom:20px;

filter:alpha(opacity:30);

    opacity:0.3;

}

</style>

<script>

    window.onload= function(){

var aLi= document.getElementsByTagName('li');

for(var i=0;i<aLi.length;i++){

aLi[i].timer=null;

aLi[i].alpha=30;

aLi[i].onmouseover=function(){

startMove(this,400,100)

}

aLi[i].onmouseout=function(){

startMove(this,200,30)

}

}

}

//var timer=null;

function startMove(obj,iTarget,style){

clearInterval(obj.timer);

obj.timer=setInterval(function(){

var speed = (iTarget-obj.offsetWidth)/8;

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

if(obj.offsetWidth == iTarget){

clearInterval(obj.timer);

}

else{

obj.style.width = obj.offsetWidth+speed+'px';

}

var app = 0;

            if(obj.alpha>style){

                app = -10;

            }

            else{

                app = 10;

            }

            if(obj.alpha == style){

            clearInterval(obj.timer)

            }

            else{

            obj.alpha+=app;

            obj.style.opacity = obj.alpha/100

            }

},30);

}

</script>

</head>


<body>

<ul>

    <li></li>

    <li></li>

    <li></li>

</ul>

</body>

</html>

物体的长度还是有问题，鼠标碰了过后有的会变长

提问者：初心未泯 2015-06-05 23:06

个回答

  • mephe
    2015-06-08 14:45:20
    已采纳

    其实是你的透明度变得比长度快,所以关闭了整个计时器,长度还没变回来

    0
  • 玉鸯子
    2016-10-20 11:21:20

    <!DOCTYPE html>
    <html>
    <head>
        <meta chsrset="utf-8" />
        <title>11</title>
    <style>
        body,ul,li{
            padding:0;
            margin:0;
        }

        ul,li{
            list-style:none;
        }

        ul li{
            width:200px;
            height:100px;
            background:#FF0;
            margin-bottom:20px;
            filter:alpha(opacity:30);
            opacity:0.3;
    }
    </style>
    <script>
        window.onload= function(){
            var aLi= document.getElementsByTagName('li');
            for(var i=0;i<aLi.length;i++){
                aLi[i].timer1=null;
                aLi[i].timer2=null;
                aLi[i].alpha=30;
                aLi[i].onmouseover=function(){
                    startMove(this,400,100)
                }
                aLi[i].onmouseout=function(){
                    startMove(this,200,30)
                }
            }
        }


        function startMove(obj,iTarget,style){
            clearInterval(obj.timer1);
            clearInterval(obj.timer2);
            obj.timer1=setInterval(function(){
                var speed = (iTarget-obj.offsetWidth)/8;
                speed = speed>0?Math.ceil(speed):Math.floor(speed);
                if(obj.offsetWidth == iTarget){
                    clearInterval(obj.timer1);
                }
                else{
                    obj.style.width = obj.offsetWidth+speed+'px';
                }
            },30);

            obj.timer2=setInterval(function(){
                var app = 0;
                if(obj.alpha>style){
                    app = -10;
                }
                else{
                    app = 10;
                }
                if(obj.alpha == style){
                    clearInterval(obj.timer2);
                }
                else{
                       obj.alpha+=app;
                    obj.style.opacity = obj.alpha/100;
                }
            },30)
        }
    </script>
    </head>
    <body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    </body>
    </html>


    这样可以。

    0
  • 别做白日梦
    2015-06-06 10:15:31

    当然会变了 你自己给加了样式

    0