JS & jQuery上下無縫滾動應用(單行或多行)

筆者在項目中要要實現用戶信息流的列表的無縫滾動效果, JS庫基於jQuery其實現並不困難

1.HTML

<div class="scrollDiv">
  <ul class="mulitline">
    <li>這是公告標題的第一行</li>
    <li>這是公告標題的第二行</li>
    <li>這是公告標題的第三行</li>
    <li>這是公告標題的第四行</li>
    <li>這是公告標題的第五行</li>
    <li>這是公告標題的第六行</li>
    <li>這是公告標題的第七行</li>
    <li>這是公告標題的第八行</li>
  </ul>
</div>

 

2.CSS定義

.scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;overflow:hidden}
.scrollDiv li{height:25px;line-height:25px;}

3.JS核心實現

$(function(){
    //單行應用
    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(){
    //多行應用
    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,即自動滾動
});

要點:CSS定義容器的寬高&定義li的行高