首页 > 代码库 > 公告滚动显示插件

公告滚动显示插件

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

插件代码:

/*** 2014年11月13日* 公告滚动显示插件*/(function ($) {    $.fn.scrollNews = function (width) {        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;        });        this.width(ulWidth);        currentMarginLeft = -ulWidth;        //滚动方法定义        var scroll = function (obj) {            setInterval(function () {                if (scrollStart) {                    obj.css("margin-left", currentMarginLeft.toString() + "px");                    currentMarginLeft += 1;                    if (currentMarginLeft > width) currentMarginLeft = -ulWidth;                }            }, 50);        };        //调用滚动方法        scroll(this);        this.mouseover(function () {            scrollStart = false;        });        this.mouseout(function () {            scrollStart = true        });    };})($);
View Code

示例HTML代码:

    <div style="float: right; margin-top: 45px; margin-right: 120px; font-size: 15px;        color: #669900;">        <ul id="ulgg">            <li><span>学校领导视察</span></li>            <li><span>学校领导视察</span></li>        </ul>    </div>
View Code

示例JS代码:

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

 

公告滚动显示插件