公告字幕滚动开发

JQUERY内部扩展方法----->滚动字幕

HMTL 代码如下：

<div class="new-remind">
<div class="notice J_notice">
<ul class="J_mainNotice">
<li><a href="javascript:void(0)">公告是指政府、团面的内容！</a></li>
<li><a href="javascript:void(0)">他的好友通知您：</a></li>
<li><a href="javascript:void(0)">他的好友通知您：下副本 急急急！</a></li>
</ul>
</div>
</div>

JQURRY 代码

jQuery.gt_notice = function (parameter) {
            var Owh = jQuery(parameter.cell), Twh = jQuery(parameter.mainCell), sumI = Twh.find(parameter.mainI);
            if (Owh.length >= 0) {
                var Ow = Owh.width(), Oh = Owh.height();
                var Tw = Twh.width(), Th = Twh.height();
                Owh.css({ "overflow": "hidden", "position": "relative", "width": Ow + "px" });
                Twh.css({ "width": Tw + "px", "position": "relative", "overflow": "hidden", "padding": "0px", "margin": "0px" });
                if (jQuery("body #convertText").length <= 0) {
                    jQuery('body').prepend('<span id="convertText" style="visibility:hidden; white-space:normal; font-size:12px;"></span>');
                }
                //JS扩展方文字计算宽度
                String.prototype.txtWidthLength = function () {
                    var convertText = jQuery('body #convertText');
                    convertText.text(this);
                    return convertText[0].offsetWidth;
                }
                if (Twh.length > 0) {
                    //公告数据集合宽度字典
                    var wnot = [], iNumber = 0; // 显示的第N个公告
                    for (var i = 0, mI = sumI.length; i < mI; i++) {
                        var suml = jQuery(sumI[i]).find("a").text();
                        var twl = suml.txtWidthLength();
                        wnot[i] = twl;
                        jQuery(sumI[i]).css({ "width": twl, "position": "relative" });
                    }
                    jQuery("body #convertText").remove();
                    //jquery 动画
                    function timeAnimate() {
                        var arg = arguments;
                        if (arg.length >= 3) {
                            jQuery(arg[0]).animate({ left: '-' + arg[1] + 'px' }, arg[2], function () {
                                jQuery(arg[0]).css("left", "0px").hide();
                                //检查公告是否是最后一条,不是则每隔5秒执行下条动画
                                if (wnot.length - 1 != iNumber) {
                                    iNumber++;
                                    if (iNumber > wnot.length - 1) {
                                        iNumber = 0;
                                    }
                                }                                
                                //var tAT = setTimeout(function () { roll_execute(); }, 1000);
                                roll_execute();
                            });
                        }
                    };
                    //初始化执行方法                    
                    var roll_execute = function () {
                        jQuery(sumI[iNumber]).show();
                        for (var i = 0, execute_sum = sumI.length; i < execute_sum; i++) {
                            if (i != iNumber) {
                                jQuery(sumI[i]).hide();
                            }
                        }
                        var tAo = setTimeout(function () { timeAnimate(sumI[iNumber], wnot[iNumber], wnot[iNumber] * 45) }, 2000);
                        
                    }
                    roll_execute();
                    
                } else {
                    console.log("jQuery选择器无法找到(" + parameter.cell + ")选择器下的(" + parameter.mainCell + ")的选择器。");
                }
            } else {
                console.log("jQuery选择器无法找到(" + parameter.cell + ")选择器。");
            }

        };

JS调用代码

    $.gt_notice({ "cell": "div.J_notice", "mainCell":"ul.J_mainNotice", "mainI": "li" });

备注：

1、HTML代码是可变动的！不论你的HTML代码是UL LI 还是 DIV 都可以通过调用gt_notice这个方法实现1个公告或多个公告的滚动的。

2、调用代码参数诠释： cell : 最外层包裹 mainCell:  包含在cell层之内的主包裹层  mainI:每一个公告的包裹层

需要注意的是 每一个公告包裹层内部的所包含的必须是a标签，a标签内包含内容，例如：

<div class="new-remind">
<div class="notice J_notice">

<div class="J_mainNotict">

<div class="notice_i"><a href="javascript:void(0)">公告1</a></div>

<div class="notice_i"><a href="javascript:void(0)">公告2</a></div>

<div class="notice_i"><a href="javascript:void(0)">公告3</a></div>

</div>
</div>
</div>

则JS调用就应该如下：

$.gt_notice({ "cell": "div.J_notice", "mainCell":"ul.J_mainNotice", "mainI": "div.notice_i" });