我的第二个 jQuery 插件：模仿新浪微博首页“大家正在说”特效

我的 第一个 jQuery 插件：模仿QQ空间好友提示层（DIV）

如题，我们今天要实现的效果是模仿新浪微博首页“大家正在说”特效：

下面是我的特效展示：

怎么样，还是挺相似的吧！下面贴出主要的 jQuery 插件代码：

/*
* 模仿新浪微博首页的“大家都在说”特效，即层自动向下滚动
*
* Copyright (c) Bruce Liu QQ:403350327   新浪微博：http://weibo.com/liuzuliang
*
* 来自：http://www.cnblogs.com/Music/archive/2012/10/20/jquery-weibo-galary.html
*
* 转载请注明，o(∩_∩)o 
*
* Version:  1.0.0
*
*/
(function($)
{
    $.fn.Marquee = function(options)
    {
        var opts = $.extend({}, $.fn.Marquee.defaults, options);
        return this.each(function()
        {
            if (opts.direction != 'up' && opts.direction != 'down')
            {
                return;
            }
            var $marquee = $(this);     //滚动元素容器
            var _scrollObj = $marquee.get(0); //滚动元素容器DOM，默认指的是 DIV
            var scrollW = $marquee.width(); //滚动元素容器的宽度，比如：300px
            var scrollH = $marquee.height(); //滚动元素容器的高度，比如：480px
            var $element = $marquee.children(); //滚动元素，得到 UL
            var $kids = $element.children(); //滚动子元素，得到 UL 下面的所有 LI，比如个数为 11
            var scrollSize = 0; //滚动元素尺寸
            var numMoved = 0; // scrollFunc 函数共执行了多少次
            $element.css('height', 10000); //防止滚动子元素比滚动元素宽而取不到实际滚动子元素宽度
            //获取滚动元素的尺寸
            $kids.each(function()
            {
                scrollSize += $(this).outerHeight();
            });
            //滚动元素总尺寸小于容器尺寸，不滚动
            if (scrollSize < scrollH)
            {
                return;
            }
            //克隆滚动子元素将其插入到滚动元素后，并设定滚动元素宽度
            var kidsClone = $kids.clone();
            $element.append(kidsClone).css('height', scrollSize * 2);
            var currentNeedToShowIndex = -1;
            var canSeeHeight = 0;   // 已经执行了的高度
            function scrollFunc()
            {
                if (opts.loop > 0)
                {
                    numMoved += opts.scrollAmount;
                    if (numMoved > scrollSize * opts.loop)
                    {
                        $marquee.scrollTop(0);
                        return clearInterval(globalTrigger);
                    }
                }
                if (currentNeedToShowIndex == -1)
                {
                    currentNeedToShowIndex = $kids.length - 1; //最后一个
                    $kids.eq(currentNeedToShowIndex).css({ "opacity": "0", "filter": "alpha(opacity=0)" });
                }
                var currentLiHeight = $kids.eq(currentNeedToShowIndex).outerHeight();
                if ((currentLiHeight - canSeeHeight) <= 0)
                {
                    var tempIndex = currentNeedToShowIndex - 1;
                    if (tempIndex != -1)
                    {
                        $kids.eq(tempIndex).css({ "opacity": "0", "filter": "alpha(opacity=0)" });
                    }
                    canSeeHeight = 0;
                    clearInterval(globalTrigger);
                    var n = 0.1;
                    $.doTimeout("tempOpacityTrigger", 50, function()
                    {
                        if (n < 1.1)
                        {
                            $kids.eq(currentNeedToShowIndex).css({ "opacity": n, "filter": "alpha(opacity=" + (n * 100) + ")" });
                            n = n + 0.1;
                            return true;
                        }
                        currentNeedToShowIndex--;
                    });
                    $.doTimeout("midfieldStopTrigger", opts.midfieldDelay, function()
                    {
                        globalTrigger = setInterval(scrollFunc, opts.scrollDelay);
                    });
                }
                canSeeHeight += opts.scrollAmount
                var newPos = $marquee.scrollTop() - opts.scrollAmount;
                if (newPos <= 0)
                {
                    newPos = scrollSize;
                }
                $marquee.scrollTop(newPos);
            }
            //滚动开始
            if (opts.direction == 'up')
            {
                $marquee.scrollTop(0);
            }
            else if (opts.direction == 'down')
            {
                $marquee.scrollTop(scrollSize);
            }
            var globalTrigger = null;
            $.doTimeout(opts.startDelay, function()
            {
                globalTrigger = setInterval(scrollFunc, opts.scrollDelay);
                $marquee.hover(function() { $.doTimeout("midfieldStopTrigger"); clearInterval(globalTrigger); }, function() { clearInterval(globalTrigger); globalTrigger = setInterval(scrollFunc, opts.scrollDelay); }); //鼠标划过停止滚动
            });
        });
    };
    $.fn.Marquee.defaults = {
        loop: 0,            //循环滚动次数，0时无限
        direction: 'down',  //滚动方向，'up','down'
        scrollAmount: 2,    //步长
        startDelay: 1500,    //开始的滚动前延迟
        midfieldDelay: 1500, //每下降完一个LI 延迟多少毫秒
        scrollDelay: 20     //时长，即每隔多少毫秒下降scrollAmount个像素
    };
    $.fn.Marquee.setDefaults = function(settings)
    {
        $.extend($.fn.Marquee.defaults, settings);
    };
})(jQuery);

 

谢谢浏览！