首页 > 其他 > 详细

公告滚动显示插件

时间:2014-11-13 18:19:36      阅读:122      评论:0      收藏:0      [点我收藏+]

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

插件代码:

bubuko.com,布布扣
/**
* 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代码:

bubuko.com,布布扣
    <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代码:

bubuko.com,布布扣
    $(function () {
        $("#ulgg").scrollNews(450);
    });
View Code

 

公告滚动显示插件

原文:http://www.cnblogs.com/s0611163/p/4095323.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!