标准的jQuery扩展函数:垂直无缝滚动.js

代码归类 Views
标准的jQuery扩展函数:垂直无缝滚动.js

//标准的jQuery扩展函数:垂直无缝滚动.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);

//html结构

<div class="xhdt">
                            <h1 class="tIco">协会动态</h1>
                            <div class="scrollList" style="height:300px;overflow:hidden;">
                                <ul class="list">
                                    #set($sql1 = "select top 20 a.* from HD_Content a left join HD_Nodes b on a.NodeID=b.NodeID ")
                                    #set($sql2 = "$sql1 where a.ModelID=1 and (a.nodeid=50) order by IsHome desc,ModifiedDate desc")
                                    #foreach($cont in $cmsext.GetSQL($sql2))
                                    <li>
                                        <p class="t"><a href="/pc/one.aspx?cid=$cont.GeneralID">$cont.titleName</a></p>
                                    </li>
                                    #end
                                </ul>
                            </div>
                        </div>
//调用
$(".xhdt div.scrollList").myScroll({
      speed: 40, //数值越大,速度越慢
      rowHeight: 38 //li的高度
});

评论 --
  • 消灭零回复