美文网首页
文字轮播

文字轮播

作者: 伊米萱 | 来源:发表于2016-12-02 18:04 被阅读0次
    (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);
    

    相关文章

      网友评论

          本文标题:文字轮播

          本文链接:https://www.haomeiwen.com/subject/zzjqmttx.html