留言滚动栏，html滚动代码，滚动留言代码

最新推荐文章于 2021-06-04 05:41:27 发布

原创最新推荐文章于 2021-06-04 05:41:27 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #js #jquery #css

本文介绍了如何制作一个持续滚动的留言栏。作者在找不到合适的现成代码后，自行编写了一个下午，成功实现了单条留言的滚动效果。代码中包含了CSS样式和JavaScript逻辑，可以根据需求调整。需要注意的是，使用时要确保引入了FrozenUI库和jQuery。

留言滚动栏，一直滚动代码，在网上找了一圈没找到，自己写了一下午终于搞定！

效果如下：
注：1.单条留言高度，持续滚动，可直接复制使用。按自己需求调整css即可，已有注释，相信聪明的你肯定能看懂
2.如无红色角标，请检查是否引入FrozenUI
3.如无效请检查你的html是否引入JQ

 <link rel="stylesheet" href="http://i.gtimg.cn/vipstyle/frozenui/2.0.0/css/frozen.css">
    <!--FrozenUI :一套基于移动端的UI库，遵从手机QQ设计规范-->

在这里插入图片描述
代码附上：

<body>
    <!-- 使用方法:
        1.通过父元素css，设置字体大小，颜色，高度，和背景颜色 
        2.css实现滚动播放 -->
    <style>
        .liuyanlibiao {
            background-color: green;
            height: 50px;
            color: yellow;
            font-size: 50px;
            overflow: hidden;
        }
    </style>
    <script>
        $(function () {
            // js只需要调整3步
            var a = $(".liuyanlibiao li"); //调整1：更改class的类名

            var sudu = 3000; //调整2：设置滚动速度
            var xianshisudu = 1500; //调整3：设置留言条显示速度
            var i = 0;

            function liuyan() {
                if (i != 0 && i < a.length) { //i不等于为且小于列表数量时
                    //前一个li隐藏
                    a.eq(i - 1).hide();
                    //当前下标li显示
                    a.eq(i).slideDown(xianshisudu);
                    i = i + 1;
                } else { //否则：i=0
                    i = 0;
                    a.eq(a.length - 1).hide();
                    a.eq(i).slideDown(xianshisudu);
                    i++;
                }
            };
            //给定时器设置个变量，用以鼠标移入停止滚动
            var dingshiqi = setInterval(
                liuyan, sudu);


            //鼠标经过时，滚动停止
            $('.liuyanlibiao').hover(function () {
                clearInterval(dingshiqi)
            }, function () {
                dingshiqi = setInterval(liuyan, sudu)
            })
            //设置留言列表css（调整4：更改class名）
            a.css({
                "display": "none",
                "position": "absolute",
                "top": "50%",
                "transform": "translate(0, -50%)",
                "width": "100%",
                "position": "relative",
                "text-align": "center",
                "margin": "0",
                "padding": "0",
            })

        })
    </script>

<ul class="liuyanlibiao ui-grid-halve">
       <!-- span 为frozenui库的角标组件，需要配合父元素ul添加class="ui-grid-halve"使用。如不需要角标，可删除spaan。li可随意添加，想添加多少条就添加多少条 -->
       <span class="ui-subscript ui-subscript-red">最新消息</span>
        <li><span>甘肃韩先生在2分钟前咨询了活动</span></li>
        <li><span>福建李先生在3分钟前咨询了活动</span></li>
       
    </ul>

</body>

</html>