Question

所以我正在为网页设计尝试一些东西，但我对以下想法有点问题：

所以我正在尝试制作一条轻巧的.png线，我在导航栏下顺利移动。因此，当我点击另一个链接时，只要该网站处于活动状态，它就会向它移动并停留在那里，但是我在查找代码时遇到了一些问题，甚至尝试自己编写代码。

如果有人为此或他们之前编写的代码提供了有用的链接，那将非常感激。

Answer 1

试试jquery animate，或者研究scrollTop，如果你想把它自己构建成自己的话，可以滚动div和setTimeout。

例如，

<html>
<head>
    <style type="text/css"> 
        .outer {
            display: block;
            width: 100px;
            height: 100px;
            overflow: hidden;
        }
        .inner {
            display: inline-block;
            float: left;
            width: 100px;
            height: 100px;
        }
    </style> 
    <script type="text/javascript">
        var isMoving;
        function moveRight() {
            if (!isMoving) {
                isMoving = true;
                var cnt = document.getElementById('container');
                for (var i = 1;i <= 10;i ++)
                    setTimeout(function () {
                        cnt.scrollLeft += 10;
                        if (cnt.scrollLeft % 100 == 0) isMoving = null;
                    }, 100*i);
            }
        }
        function moveLeft() {
            if (!isMoving) {
                isMoving = true;
                var cnt = document.getElementById('container');
                for (var i = 1;i <= 10;i ++)
                    setTimeout(function () {
                        cnt.scrollLeft -= 10;
                        if (cnt.scrollLeft % 100 == 0) isMoving = null;
                    }, 100*i);
            }
        }
    </script>
</head>
<body>
    <div id="container" class="outer">
        <div style="width: 300px">
            <div class="inner" style="background-color: green;"></div>
            <div class="inner" style="background-color: red;"></div>
            <div class="inner" style="background-color: blue;"></div>
        </div>
    </div>
    <button onclick="moveRight();">move to right</button>
    <button onclick="moveLeft();">move to left</button>
</body>

此致

贲

在我的导航栏下顺利移动线条

1 个答案: