文字轮播

(function($){
    $.fn.myScroll = function(options){
    //默认配置
    var defaults = {
        speed:40,  //滚动速度,值越大速度越慢(定时器设置的时间)
        rowHeight:24 //每行的高度
    };
    
    var opts = $.extend({}, defaults, options);
    var intId = [];
    
    function marquee(obj, liHeight){
    
        obj.find("ul").animate({
            marginTop: '-=1'
        },0,function(){
                var ulMargintop = Math.abs(parseInt($(this).css("margin-top")));
            // $(this)指的是ul 
                if(ulMargintop >= liHeight){
                    $(this).find("li").slice(0, 1).appendTo($(this));
                    //将第一个li元素截取追加到ul末尾
                    //(appendTo方法:如果是已存在的元素,它将从当前位置被移除,并在被选元素的结尾被插入)
                    $(this).css("margin-top", 0);
                }
            });
        }
        // this表示ul父盒子
        this.each(function(i){
            var liHeight = opts["rowHeight"];
            var speed = opts["speed"];
            var _this = $(this);// this表示ul父盒子
            console.log(i);
            intId[i] = setInterval(function(){
                if(_this.find("ul").height()<=_this.height()){
                    clearInterval(intId[i]);
                }else{
                    marquee(_this, liHeight);
                }
            }, speed);

            //鼠标hover时清除定时器,移开继续
            _this.hover(function(){
                clearInterval(intId[i]);
            },function(){
                intId[i] = setInterval(function(){
                    if(_this.find("ul").height()<=_this.height()){
                        clearInterval(intId[i]);
                    }else{
                        marquee(_this, liHeight);
                    }
                }, speed);
            });
        
        });

    }

})(jQuery);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容