如何将更改透明度和变换高度同时作用在\多物体运动\上,求各位大神帮帮忙,看我哪里错了

来源:4-1 JS多物体动画

superli18

2016-09-25 11:11

57e73ffd0001292505000161.jpg

57e73ffd00013b2905000079.jpg

57e73ffe0001777505000282.jpg

请问JS部分应该怎么改?

写回答 关注

4回答

  • 半桶水的好人
    2016-11-04 13:00:59

    <!doctype html>
    <html>
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>Document</title>
      <style type="text/css">
         * {
            margin:0;
            padding:0;
        }
         ul li{
            width:200px;
            height:100px;
            background:yellow;
            list-style:none;
            margin-top:20px;
            filter:alpha(opacity:30);
            opacity:0.3;
        }
      </style>
      <script type="text/javascript">
        window.onload=function(){
            var lis=document.getElementsByTagName("li");
            //var timer=null;
            for(var i=0;i<lis.length;i++){
                lis[i].alpha=30;
                lis[i].timer=null;
                lis[i].onmouseover=function(){
                    showMove(this,400,100);
                }
                lis[i].onmouseout=function(){
                    showMove(this,200,30);
                }
            }
            function showMove(obj,target1,target2){
                clearInterval(obj.timer);
                obj.timer=setInterval(function(){
                    var sheed=(target1-obj.offsetWidth)/10;
                    if(sheed>0){
                        sheed=Math.ceil(sheed);
                    }else {
                        sheed=Math.floor(sheed);
                    }
                    var sheed2=0;
                    if(obj.alpha>target2){
                        sheed2=-5;
                    }else{
                        sheed2=5
                    }
                    if(obj.alpha == target2 && target1 == obj.offsetWidth){
                        clearInterval(obj.timer);
                    }else{
                        obj.alpha+=sheed2;
                        obj.style.filter="alpha(opacity:"+obj.alpha+")";
                        obj.style.opacity=obj.alpha/100;
                        obj.style.width=obj.offsetWidth+sheed+"px";
                    }
                },30)
            }
        }
      </script>
     </head>
     <body>
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
     </body>
    </html>

  • qq_波比_04027934
    2016-09-26 13:18:28

    最后一句,obj.style.opacity=obj.alpha/10改为obj.style.opacity=obj.alpha/100,试试.我的代码与你的结构类似,两种效果都出来了

  • qq_波比_04027934
    2016-09-26 12:47:04

    你的obj.alpha没有定义


  • 艾狄生
    2016-09-25 11:37:02

    没看懂你透明度是怎么个变化的!1

JS动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113925 学习 · 1443 问题

查看课程

相似问题