琴& 2019-01-19 19:58 采纳率: 33.3%
浏览 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条回答 默认 最新

  • 天际的海浪 2019-01-19 20:53
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 如何用MATLAB实现以下三个公式（有相互嵌套）
  • ¥50 安装华大九天aether
  • ¥30 关于#算法#的问题：运用EViews第九版本进行一系列计量经济学的时间数列数据回归分析预测问题 求各位帮我解答一下
  • ¥15 setInterval 页面闪烁，怎么解决
  • ¥15 如何让企业微信机器人实现消息汇总整合
  • ¥50 关于#ui#的问题：做yolov8的ui界面出现的问题
  • ¥15 如何用Python爬取各高校教师公开的教育和工作经历
  • ¥15 TLE9879QXA40 电机驱动
  • ¥20 对于工程问题的非线性数学模型进行线性化
  • ¥15 Mirare PLUS 进行密钥认证？（详解）