weixin_43645287
琴&
2019-01-19 19:58
采纳率: 75%
浏览 368

为什么这个多标签的运动实现不了?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        .main-guild {
            font-size: 1.1rem;
            font-weight: 700;
        }

        .a {
            float: left;
            position: relative;
            height: 20px;
            background: red;
        }
        .b {
            /* 0-30 */
            position: absolute;
            width: 0px;
            height: 1px;
            background: blue;
        }
        .c{
            /* 22   40 */
            margin-left:22px; 
            height: 40px;
        }
        .main-guild li{
            height: 20px;
            margin-top: 20px;
        }
    </style>
    <script>
        window.onload = function () {
            var a = document.getElementsByClassName('a');
            var b = document.getElementsByClassName('b');
            var c = document.getElementsByClassName('c');

            var i = 0;

            for(i=0;i<b.length;i++)
            {
                b[i].style.top=(a[0].offsetHeight/2-1)+'px';
            }

            for(i=0;i<c.length;i++)
            {
                c[i].onmouseover=function()
                {
                    startMove(b[i],{marginLeft:40});//是这里的问题,如何获取对应的元素执行??
                }
            }
        }

        //完美运动框架:同时多个属性变化;不会相互影响

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

        function startMove(obj, json, fn) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var bStop = true;  //所有值都已经到达
                for (var attr in json) {
                //去当前值
                    var iCur = 0;

                    if (attr == 'opacity') {
                        iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
                    } else {
                        iCur = parseInt(getStyle(obj, attr));
                    }

                //算速度
                    var iSpeed = (json[attr] - iCur) / 8;
                    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

                //检测停止
                    if (iCur != json[attr]) {
                        bStop=false;
                    }

                    if (attr == 'opacity') {
                            obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')'; //优先级
                            obj.style.opacity = (iCur + iSpeed) / 100;
                        } else {
                            obj.style[attr] = iCur + iSpeed + 'px';
                        }
                    }

                    if(bStop) {
                        clearInterval(obj.timer);

                        if (fn) {
                            fn();
                        }
                    }
            }, 30)
        }
    </script>
</head>

<body>
    <div class="main-guild">
        <ul>
            <li>
                <div class="a"><div class="b"></div></div> <div class="c"><a href="#">Expose</a></div>
            </li>
            <li>
                <div class="a"><div class="b"></div></div>  <div class="c"><a href="#">jsPDF</a></div>
            </li>
            <li>
                <div class="a"><div class="b"></div></div>  <div class="c"><a href="#">BaySentry</a></div>
            </li>
            <li>
                <div class="a"><div class="b"></div></div>  <div class="c"><a href="#">vtop</a></div>
            </li>
        </ul>

    </div>

</body>

</html>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • jslang
    天际的海浪 2019-01-19 20:53
    已采纳

    因为你需要在事件内使用事件外的循环变量i。
    当事件触发时,那个循环早就结束了,那时的i的值已经是循环最大值加1了。
    所以需要用一些方式保存住当前循环的i的值。
    用(function(i){})(i);闭包保存住当前循环的i的值。就是一种方案。

    点赞 评论

相关推荐