公告滚动显示插件

公告滚动显示插件(jQuery插件编写)

插件代码：

/**
* 2014年11月13日
* 公告滚动显示插件
*/

(function ($) {
    $.fn.scrollNews = function (width) {
        if (this.find("li").length == 0) return;

        var ulWidth = 0;
        var currentMarginLeft = 0;
        var scrollStart = true;

        //初始化div属性
        this.parent().width(width);
        this.parent().css("overflow", "hidden");

        //初始化ul属性
        this.css("float", "left");

        //初始化li属性
        var liMarginRight = 20;
        this.find("li").css("margin-right", liMarginRight.toString() + "px");
        this.find("li").css("float", "right");

        //初始化ul宽度和当前的margin-left
        this.find("li").each(function () {
            ulWidth += $(this).width() + liMarginRight + 1;
        });
        this.width(ulWidth);
        currentMarginLeft = width;
        this.css("margin-left", currentMarginLeft);

        //滚动方法定义
        var scroll = function (obj) {
            setInterval(function () {
                if (scrollStart) {
                    obj.css("margin-left", currentMarginLeft.toString() + "px");
                    currentMarginLeft -= 1;
                    if (currentMarginLeft < -ulWidth) currentMarginLeft = width;
                }
            }, 50);
        };

        //显示div
        this.parent().css("visibility", "visible");

        //调用滚动方法
        scroll(this);

        this.mouseover(function () {
            scrollStart = false;
        });

        this.mouseout(function () {
            scrollStart = true
        });
    };
})($);

View Code

示例HTML代码：

<div style="float: right; margin-right: 10px; margin-top: 5px; font-size: 15px; visibility: hidden;">
        <ul id="ulgg">
            <!-- BEGIN noticeList -->
            <li><a href="#{noticeLink}"><span style="color: #ff0000;">★#{notice.NoticeTitle}</span></a></li>
            <!-- END noticeList -->
        </ul>
    </div>

View Code

示例JS代码：

$(function () {
        $("#ulgg").scrollNews(450);
    });

View Code