公告字幕滾動開發

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" });