jquery 上下无缝滚动

//html结构

<div class="bcon">
        <h1><b>jquery无缝滚动</b></h1>
        <div class="list_lh">
            <ul>
                <li>
                    <p>我是一楼</p>
                </li>
                <li>
                    <p>我是二楼</p>
                </li>
                <li>
                    <p>我是三楼</p>
                </li>
                <li>
                    <p>我是四楼</p>
                </li>
                <li>
                    <p>我是五楼</p>
                </li>               
            </ul>
        </div>
    </div>

//调用jq文件
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/scroll.js"></script> <script> $(function(){ $("div.list_lh").myScroll({ speed:40, //数值越大，速度越慢 rowHeight:44 //li的高度 }); });
</script>

 

//scroll.js

(function($){
    $.fn.myScroll = function(options){
    //默认配置
    var defaults = {
        speed:40,  //滚动速度,值越大速度越慢
        rowHeight:24 //每行的高度
    };

    var opts = $.extend({}, defaults, options),intId = [];

    function marquee(obj, step){

        obj.find("ul").animate({
            marginTop: '-=1'
        },0,function(){
                var s = Math.abs(parseInt($(this).css("margin-top")));
                if(s >= step){
                    $(this).find("li").slice(0, 1).appendTo($(this));
                    $(this).css("margin-top", 0);
                }
            });
        }

        this.each(function(i){
            var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
            intId[i] = setInterval(function(){
                if(_this.find("ul").height()<=_this.height()){
                    clearInterval(intId[i]);
                }else{
                    marquee(_this, sh);
                }
            }, speed);

            _this.hover(function(){
                clearInterval(intId[i]);
            },function(){
                intId[i] = setInterval(function(){
                    if(_this.find("ul").height()<=_this.height()){
                        clearInterval(intId[i]);
                    }else{
                        marquee(_this, sh);
                    }
                }, speed);
            });
        });
    }
})(jQuery);

 

转载于:https://www.cnblogs.com/Agrass/p/6595868.html