琴& 2019-01-19 19:58 采纳率: 50%
浏览 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 基于卷积神经网络的声纹识别
  • ¥15 Python中的request，如何使用ssr节点，通过代理requests网页。本人在泰国，需要用大陆ip才能玩网页游戏，合法合规。
  • ¥100 为什么这个恒流源电路不能恒流？
  • ¥15 有偿求跨组件数据流路径图
  • ¥15 写一个方法checkPerson，入参实体类Person，出参布尔值
  • ¥15 我想咨询一下路面纹理三维点云数据处理的一些问题，上传的坐标文件里是怎么对无序点进行编号的，以及xy坐标在处理的时候是进行整体模型分片处理的吗
  • ¥15 CSAPPattacklab
  • ¥15 一直显示正在等待HID—ISP
  • ¥15 Python turtle 画图
  • ¥15 stm32开发clion时遇到的编译问题