jquery 上下滚动菜单

云浩坤 3周前 8浏览 0评论

在Web开发中，实现一个漂亮且易于操作的菜单对于用户的体验至关重要。而jQuery的出现为我们带来了更便捷而且强大的实现方式。在本文中，我们将介绍如何使用jQuery实现一个上下滚动菜单。

<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
    #menu {
        height: 300px;
        overflow: hidden;
    }
    ul {
        margin: 0;
        padding: 0;
        position: relative;
        top: 0;
    }
    li {
        list-style: none;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #ccc;
    }
</style>
</head>
<body>
<div id="menu">
    <ul id="list">
        <li>菜单项1</li>
        <li>菜单项2</li>
        <li>菜单项3</li>
        <li>菜单项4</li>
        <li>菜单项5</li>
    </ul>
</div>
<script>
    $(function () {
        var menu = $('#menu');
        var list = $('#list');
        var menuHeight = menu.height();
        var liHeight = $('li').height();
        var time;

        function autoRoll() {
            time = setInterval(function () {
                list.animate({'top': -liHeight + 'px'}, 1000, function () {
                    list.css({'top': 0}).find('li:first').appendTo(list);
                });
            }, 2000);
        }

        menu.mouseenter(function () {
            clearInterval(time);
        }).mouseleave(function () {
            autoRoll();
        });

        autoRoll();
    });
</script>
</body>
</html>

上面的代码实现了一个滚动菜单。首先，我们通过样式设置菜单容器固定高度并隐藏溢出部分，设置列表元素样式使其排列好看；然后使用jQuery实现定时器，通过animate方法对列表进行动画操作；最后，通过MouseEvent监听鼠标进出事件，控制定时器启停。

这样的上下滚动菜单可用于展示各种信息，并且代码简洁易懂，非常适合快速构建一个漂亮的网页。

上一篇 jquery 写注册

下一篇 jquery 写菜单

网站导航

网站导航

最近发表

文章归档

jquery 上下滚动菜单