jquery 上下滚动

最新推荐文章于 2025-06-21 10:55:45 发布
转载最新推荐文章于 2025-06-21 10:55:45 发布 · 132 阅读
0 ·
本内容遵循CC 4.0 BY-SA版权协议
原文链接：http://www.cnblogs.com/haof3344/archive/2012/06/24/2560127.html
本文介绍使用原生JavaScript和jQuery实现的滚动效果，包括单行和多行文本的自动滚动，通过设置滚动间隙时间和动画效果，实现了平滑的滚动体验。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    <style type="text/css">
        *
        { margin:0px; padding:0px;
            }
        #demo h2{background:#a40000; font-size:12px; color:#fff; font-weight:normal; text-align:center; width:100px; height:25px;line-height:25px; margin:30px 0 0 20px}
        #demo ul.line,#demo ul.mulitline{width:500px; height:300px; background:#eee; overflow:hidden;margin-bottom:20px;border:2px solid #a40000}
        #demo ul.mulitline{height:300px}
        #demo li{text-indent:15px; font-size:12px; line-height:30px;list-style:none; display:block}
    </style>
</head>
<body>
    <form id="form1" runat="server">
   <div id="demo">
<h2>单行应用</h2>
<ul class="line">
    <li><a title="简易的点击展开/关闭效果(原生JS版和JQ版)" href="http://mrthink.net/js-jq-click-openclose/">简易的点击展开/关<br />闭效果(原生JS版和JQ版)</a> 2010年08月02日 (6)</li>
    <li><a title="getElementsByTagName的简写方式" href="http://mrthink.net/javascrip-simple-getelementsbytagname/">getElementsByTagName的简写方式</a> 2010年06月24日 (4)</li>
    <li><a title="一个简单的鼠标划过切换效果" href="http://mrthink.net/script-mousechange-simple/">一个简单的鼠标划过切换效果</a> 2010年05月23日 (4)</li><li><a title="奇或偶数行高亮显示及鼠标划过高亮显示类" href="http://mrthink.net/javascript-tagnames-highlight/">奇或偶数行高亮显示及鼠标划过高亮显示类</a> 2010年05月05日 (5)</li>
    <li><a title="一个简单的纵横向动画效果类" href="http://mrthink.net/javascrip-dom-slide-simple/">一个简单的纵横向动画效果类</a> 2010年05月02日 (4)</li><li><a title="document.getElementById的简写方式" href="http://mrthink.net/javascript-getbyid-simplewrite/">document.getElementById的简写方式</a> 2010年04月18日 (1)</li>
    <li><a title="两种简单实现菜单高亮显示的JS类" href="http://mrthink.net/javascript-highlight-menu-twoway/">两种简单实现菜单高亮显示的JS类</a> 2010年04月17日 (10)</li>
</ul>
<!--//多行应用//-->
<ul class="mulitline">
    <li><a title="一个简单的鼠标划过切换效果" href="http://mrthink.net/script-mousechange-simple/">一个简单的鼠标划过切换效果</a> 2010年05月23日 (4)</li><li><a title="奇或偶数行高亮显示及鼠标划过高亮显示类" href="http://mrthink.net/javascript-tagnames-highlight/">奇或偶数行高亮显示及鼠标划过高亮显示类</a> 2010年05月05日 (5)</li>
    <li><a title="getElementsByTagName的简写方式" href="http://mrthink.net/javascrip-simple-getelementsbytagname/">getElementsByTagName的简写方式</a> 2010年06月24日 (4)</li>
    <li><a title="两种简单实现菜单高亮显示的JS类" href="http://mrthink.net/javascript-highlight-menu-twoway/">两种简单实现菜单高亮显示的JS类</a> 2010年04月17日 (10)</li>
    <li><a title="简易的点击展开/关闭效果(原生JS版和JQ版)" href="http://mrthink.net/js-jq-click-openclose/">简易的点击展开/关闭效果(原生JS版和JQ版)</a> 2010年08月02日 (6)</li>
    <li><a title="一个简单的纵横向动画效果类" href="http://mrthink.net/javascrip-dom-slide-simple/">一个简单的纵横向动画效果类</a> 2010年05月02日 (4)</li><li><a title="document.getElementById的简写方式" href="http://mrthink.net/javascript-getbyid-simplewrite/">document.getElementById的简写方式</a> 2010年04月18日 (1)</li>
</ul>
</div>

    <input type="button" value="adsf" onclick="add()" />
    </form>
    <script type="text/javascript">
        $(function () {
            //单行应用 向下滚动
            var wrap = $('ul.line'); //定义滚动区域
            var interval = 3000; //定义滚动间隙时间
            var moving; //需要清除的动画
            wrap.hover(function () {
                clearInterval(moving); //当鼠标在滚动区域中时,停止滚动
            }, function () {
                moving = setInterval(function () {
                    var field = wrap.find('li:last'); 
                    var h = field.height(); 
                    wrap.prepend(field.css('marginTop', -h + 'px'));//将最后一个移到顶部，且不可见
                    field.animate({ 'marginTop': 0 }, 600)//显示出来
                }, interval)//滚动间隔时间取决于_interval
            }).trigger('mouseleave');
        });
        $(function () {
            //多行应用  向下
            var _wrap = $('ul.mulitline'); //定义滚动区域
            var _interval = 3000; //定义滚动间隙时间
            var _moving; //需要清除的动画
            _wrap.hover(function () {
                clearInterval(_moving); //当鼠标在滚动区域中时,停止滚动
            }, function () {
                _moving = setInterval(function () {
                    var _field = _wrap.find('li:first'); //此变量不可放置于函数起始处,li:first取值是变化的
                    var _h = _field.height(); //取得每次滚动高度
                    _field.animate({ marginTop: -_h + 'px' }, 600, function () {//通过取负margin值,隐藏第一行
                        _field.css('marginTop', 0).appendTo(_wrap); //隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
                    })
                }, _interval)//滚动间隔时间取决于_interval
            }).trigger('mouseleave'); //函数载入时,模拟执行mouseleave,即自动滚动
        });

        function add() {
            var wrap = $("ul.line");
            var field = wrap.find("li:last");
            var h = field.height();
            field.css('marginTop', -h + 'px');
            wrap.prepend(field);
            field.animate({ marginTop: 0 }, 600);
        }
    </script>
</body>
</html>
原文发布于Mr.Think的个人博客: http://mrthink.net/js-jq-autoscroll-updown/
自己加了一个单行向下的