公告滚动

最新推荐文章于 2022-05-03 18:22:56 发布

Sokach321

最新推荐文章于 2022-05-03 18:22:56 发布

阅读量504

点赞数

本文链接：https://blog.csdn.net/weixin_43549976/article/details/108681608

版权

公告滚动

setInterval() 按照指定的时间周期（以毫秒计）来调用函数或计算表达式

弊端：随着时间的推移内存占用会增多，时间长了可能会造成页面卡顿，严重的甚至浏览器崩溃

clearInterval() 取消由 setInterval() 函数设定的定时执行操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://lzycweb.eap2.net/resource/css/bootstrap.min.css">
    <script src="http://lzycweb.eap2.net/resource/js/jquery-2.1.4.min.js"></script>
</head>

<body>
    <style>
        boddy {
            background: #f3f3f3;
        }

        ul,
        li {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .notice {
            width: 600px;
            background: #fff;
            box-shadow: 0 0 25px rgba(180, 180, 180, .4);
            margin: 50px auto;
            height: 46px;
            overflow: hidden;
        }

        .notice ul li {
            width: 100%;
            line-height: 46px;
            color: #999;
            padding: 0 15px;
            /* float: left; */
        }
    </style>
    <div class="notice">
        <ul>
            <li><span class="pull-right">08-08</span>内容内容内容内容内容内容内容</li>
            <li><span class="pull-right">08-08</span>内容内容内容内容内容内容内容</li>
            <li><span class="pull-right">08-08</span>内容内容内容内容内容内容内容</li>
            <li><span class="pull-right">08-08</span>内容内容内容内容内容内容内容</li>
            <li><span class="pull-right">08-08</span>内容内容内容内容内容内容内容</li>
        </ul>
    </div>
    <script>
		var lineHeight = $('.notice ul li').css('line-height');
        // 公用滚动方法
        function scroll(lineHeight) {
            $('.notice').find('ul').animate({
                marginTop: '-' + lineHeight
            }, 500, function () {
        // 动画执行完的回调
                $(this).css({
                    'margin-top': 0
                }).find('li:first').appendTo(this)
            })
        }

        $(function () {
            var time = setInterval('scroll(lineHeight)', 3000)
            $('.notice ul').find('li').mouseover(function () {
                clearInterval(time)
            }).mouseout(function () {
                time = setInterval('scroll(lineHeight)', 3000)
            })
        })
    </script>
</body>

</html>

Sokach321

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
公告滚动

公告滚动setInterval() 按照指定的时间周期（以毫秒计）来调用函数或计算表达式弊端：随着时间的推移内存占用会增多，时间长了可能会造成页面卡顿，严重的甚至浏览器崩溃clearInterval() 取消由 setInterval() 函数设定的定时执行操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"
复制链接

扫一扫