基于JQuery的上下无缝滚动应用(单行或多行)

转载自 ：基于jQuery的上下无缝滚动应用(单行或多行)@Mr.Think

 

基于jQuery的上下无缝滚动应用,可应用于多行或者单行.详解请参考注释.

查看演示: 点此查看DEMO

源代码：

 Javascript代码：

$(function(){
    //单行应用@Mr.Think
    var _wrap=$('ul.line');//定义滚动区域
    var _interval=2000;//定义滚动间隙时间
    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(){
    //多行应用@Mr.Think
    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,即自动滚动
});

 

 

 HTML代码：

 

<!--DEMO start-->
    <div id="demo">
        <h2>
            单行应用</h2>
        <ul class="line">
            <li><a href="#">
                简易的点击展开/关闭效果(原生JS版和JQ版)</a> 2010年08月02日 (6)</li>
            <li><a href="#">
                getElementsByTagName的简写方式</a> 2010年06月24日 (4)</li>
            <li><a href="#">一个简单的鼠标划过切换效果</a>
                2010年05月23日 (4)</li>
            <li><a href="#">
                    奇或偶数行高亮显示及鼠标划过高亮显示类</a> 2010年05月05日 (5)</li>
            <li><a href="#">一个简单的纵横向动画效果类</a>
                2010年05月02日 (4)</li><li><a href="#">
                    document.getElementById的简写方式</a> 2010年04月18日 (1)</li>
            <li><a href="#">
                两种简单实现菜单高亮显示的JS类</a> 2010年04月17日 (10)</li>
        </ul>
        

        <h2>多行应用</h2>
        <ul class="mulitline">
            <li><a href="#">一个简单的鼠标划过切换效果</a>
                2010年05月23日 (4)</li>
            <li><a href="#">奇或偶数行高亮显示及鼠标划过高亮显示类</a> 2010年05月05日 (5)</li>
            <li><a href="#">
                getElementsByTagName的简写方式</a> 2010年06月24日 (4)</li>
            <li><a href="#">
                两种简单实现菜单高亮显示的JS类</a> 2010年04月17日 (10)</li>
            <li><a href="#">
                简易的点击展开/关闭效果(原生JS版和JQ版)</a> 2010年08月02日 (6)</li>
            <li><a href="#">一个简单的纵横向动画效果类</a>
                2010年05月02日 (4)</li>
            <li><a href="#">
                    document.getElementById的简写方式</a> 2010年04月18日 (1)</li>
        </ul>
        <!--//多行应用//-->
    </div>
    <!--DEMO end-->