向上滚动

最新推荐文章于 2026-01-01 17:43:06 发布

转载最新推荐文章于 2026-01-01 17:43:06 发布 · 71 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jinbiao/archive/2011/12/14/2287955.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用jQuery实现滚动广告条的动态效果，包括设置广告条数量、延迟时间和滚动速度，以及如何通过鼠标悬停来控制广告条滚动。

<script type="text/javascript">// <![CDATA[
<span id="mce_marker" data-mce-type="bookmark"></span><span id="__caret">_</span>// <![CDATA[
(function($){
    $.fn.scroll = function(options) {
var settings = {
            lines: 2,
            delay: 2000    
        }

if (options) {
            $.extend(settings,options);
        }

var lines = settings.lines,
            delay = settings.delay;        
return this.each(function() {
var $self = $(this),
                $ul = $self.find('ul:first'),
                iNum = $ul.find('li').length, //广告条数
                iLH = $ul.find('li:first').height(), //每行广告的高度
                speed = 600, //动画执行时间
                timer = null; 

//重置ul的高度
            $ul.height(iLH * iNum);

//向上滚动函数
            var scrollUp = function() {
                $ul.stop(true,true).animate({top: iLH * lines * -1},speed,function() {
var _$this = $(this);
for (var i = 0; i < lines; i++) {
                        _$this.find('li:first').appendTo(_$this);
                    }
                    _$this.css({top:0});
                })
            }

           $self.hover(
               function() {
                   clearInterval(timer);
               },
               function() {
                   timer = setInterval(scrollUp,delay);
               }
           ) 

            timer = setInterval(scrollUp,delay);   
        })    
    }
})(jQuery)
// ]]></script>
<script type="text/javascript">// <![CDATA[
             $(function(){ $('.all_recom').scroll({delay:5000,lines:5});  })
// ]]></script>
<div style="height: 144px; background: #fff; padding-top: 20px;">
<div class="all_recom" style="position: relative; overflow: hidden; width: 201px; padding: 0 74px; height: 125px;">
<ul class="act_bd" style="position: absolute; top: 0; left: 0; margin: 0;">
<li>ssss</li>
<li>ssss</li>
<li>ssss</li>
<li>ssss</li>
</ul>
</div>
</div>