jquery多行滚动

最新推荐文章于 2022-05-31 13:13:21 发布

mgtts

最新推荐文章于 2022-05-31 13:13:21 发布

阅读量68

点赞数

分类专栏： jQuery 文章标签： jQuery 公告 JavaScript CSS XHTML ViewUI

本文链接：https://blog.csdn.net/mgtts/article/details/83697818

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
	创建人：牛腩
	创建时间：2009-1-12 11:59:55
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
    <title>多行滚动演示</title>
    <style type="text/css">
        ul, li
        {
            margin: 0;
            padding: 0;
        }
        #scrollDiv
        {
            width: 300px;
            height: 100px;
            min-height: 25px;
            line-height: 25px;
            border: #ccc 1px solid;
            overflow: hidden;
        }
        #scrollDiv li
        {
            height: 25px;
            padding-left: 10px;
        }
    </style>

    <script type="text/javascript" src="/js/jquery.pack.js"></script>

    <script type="text/javascript">

        $.fn.extend({

            Scroll: function(opt, callback) {

                //参数初始化

                if (!opt) var opt = {};

                var _this = this.eq(0).find("ul:first");

                var lineH = _this.find("li:first").height(), //获取行高

                      line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10), //每次滚动的行数，默认为一屏，即父容器高度

                       speed = opt.speed ? parseInt(opt.speed, 10) : 500, //卷动速度，数值越大，速度越慢（毫秒）

                       timer = opt.timer ? parseInt(opt.timer, 10) : 3000; //滚动的时间间隔（毫秒）

                if (line == 0) line = 1;

                var upHeight = 0 - line * lineH;

                //滚动函数

                scrollUp = function() {

                    _this.animate({

                        marginTop: upHeight

                    }, speed, function() {

                        for (i = 1; i <= line; i++) {

                            _this.find("li:first").appendTo(_this);

                        }

                        _this.css({ marginTop: 0 });

                    });

                }

                //鼠标事件绑定

                _this.hover(function() {

                    clearInterval(timerID);

                }, function() {

                    timerID = setInterval("scrollUp()", timer);

                }).mouseout();

            }

        })





        $(document).ready(function() {

            $("#scrollDiv").Scroll({ line: 4, speed: 500, timer: 3000 });

        });

    </script>

</head>
<body>
    <p>
        多行滚动演示：</p>
    <div id="scrollDiv">
        <ul>
            <li>这是公告标题的第一行</li>
            <li>这是公告标题的第二行</li>
            <li>这是公告标题的第三行</li>
            <li>这是公告标题的第四行</li>
            <li>这是公告标题的第五行</li>
            <li>这是公告标题的第六行</li>
            <li>这是公告标题的第七行</li>
            <li>这是公告标题的第八行</li>
        </ul>
    </div>
</body>
</html>

mgtts

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery多行滚动

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;!-- 创建人：牛腩创建时间：2009-1-12 11:59:55--&gt;&lt;html xmlns="htt...
复制链接

扫一扫

专栏目录