第一百三十九節，JavaScript，封裝庫--CSS選擇器

時間 2019-11-12

標籤第一百三十九 javascript 封裝 css 選擇器欄目 JavaScript 简体版

原文原文鏈接

JavaScript，封裝庫--修改元素選擇器javascript

就是將構造庫函數修改爲元素選擇器，像css那樣，輸入#xxx .xxx xxx （獲取指定id下的指定class下的指定標籤元素）css

修改後的基礎庫html

/**
 *feng_zhuang_ku_1.0版本，js封裝庫，2016/12/29日：林貴秀
 **/

/** 前臺調用
 * 每次調用$()建立庫對象,使其每次調用都是獨立的對象
 * $()建立庫對象,有一個可選參數，參數有兩種方式，1是傳入的this，2是傳入的字符串
 * 可選參數說明：
 * 傳入的this，this，就是當前對象自己
 * 傳入的字符串，表明獲取元素選擇器
 * 參數是元素選擇器(id值、class值、標籤名稱)其中同樣的字符串方式，或者是其中幾樣的字符串組合方式
 * 獲取一個元素傳參方式 '#xxx'( 表示獲取id)，'.xxx'(表示獲取class)，'xxx'(表示獲取標籤)
 * 從父元素向下獲取組合方式按照，一個元素傳參方式加上空格，如: ('#sdf .hjk p')表示獲取id爲sdf元素下的class爲hjk下的p元素
 **/
var $ = function (args) {
    return new feng_zhuang_ku(args);
};

/**
 *定義封裝庫構造函數，類庫
 **/
function feng_zhuang_ku(args) {
    /** jie_dian屬性，建立數組，初始化，保存獲取到的元素節點，返回數組
     **/
    this.jie_dian = [];
    if (typeof args == 'string') {                      //若是傳入的是字符串，說明是獲取元素選擇器
        if (args.indexOf(' ') != -1) {
            /**從父元素向下獲取組合方式**/
            var fen_ge = args.split(' ');                //將接收的組合式元素名稱分割成數組
            var lin_shi = [];                            //保存臨時對象的數組，解決被覆蓋問題
            var fu_yuan_su = [];                         //保存父元素的數組
            for (var i = 0; i < fen_ge.length; i++) {
                if (fu_yuan_su.length == 0)fu_yuan_su.push(document);               //若是沒有父節點，就把document放入父節點
                switch (fen_ge[i].charAt(0)) {                                     //判斷字符串的第一個字符是什麼
                    case '#':                                                      //說明是id
                        lin_shi = [];                                              //清理臨時數組，以便父節點失效，子節點有效
                        lin_shi.push(this.huo_qu_id(fen_ge[i].substring(1)));      //去除第一個字符，獲取到傳入的id元素，保存到臨時數組
                        fu_yuan_su = lin_shi;                                      //將臨時節點數組放入父節點數字
                        break;                                                     //說明是class
                    case '.':
                        lin_shi = [];                                                                   //清理臨時數組，以便父節點失效，子節點有效
                        for (var f = 0; f < fu_yuan_su.length; f++) {                                  //根據父節點的長度循環
                            var tempss = this.huo_qu_class(fen_ge[i].substring(1), fu_yuan_su[f]);     //獲取到父節點下的子節點
                            for (var n = 0; n < tempss.length; n++) {                      //循環子節點，將每次循環的子節點添加到臨時數組
                                lin_shi.push(tempss[n]);
                            }
                        }
                        fu_yuan_su = lin_shi;                                               //將臨時節點數組放入父節點數字
                        break;
                    default:                                                               //說明是標籤
                        lin_shi = [];                                                       //清理臨時數組，以便父節點失效，子節點有效
                        for (var j = 0; j < fu_yuan_su.length; j++) {                      //根據父節點的長度循環
                            var temps = this.huo_qu_name(fen_ge[i], fu_yuan_su[j]);        //獲取到父節點下的子節點
                            for (var k = 0; k < temps.length; k++) {                       //循環子節點，將每次循環的子節點添加到臨時數組
                                lin_shi.push(temps[k]);
                            }
                        }
                        fu_yuan_su = lin_shi;                                               //將臨時節點數組放入父節點數字
                }
            }
            this.jie_dian = lin_shi;                                            //將臨時數組放入jie_dian數組
        } else {
            /**一個元素傳參方式**/
            switch (args.charAt(0)) {                                           //判斷字符串的第一個字符是什麼
                case '#':                                                       //說明是id
                    this.jie_dian.push(this.huo_qu_id(args.substring(1)));      //去除第一個字符，獲取到傳入的id元素
                    break;
                case '.':                                                       //說明是class
                    this.jie_dian = this.huo_qu_class(args.substring(1));       //去除第一個字符，獲取到傳入的class元素
                    break;
                default:                                                        //說明是標籤
                    this.jie_dian = this.huo_qu_name(args);                     //獲取到傳入的標籤元素
            }
        }
    } else if (typeof args == 'object') {                                       //若是傳入的是對象，說明是this，就是當前對象自己
        if (args != undefined) {
            this.jie_dian[0] = args;
        }
    }
}

/**$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$**/


/**$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$**/


/**------------------------------------------------獲取元素標籤開始--------------------------------------------**/
/**獲取元素標籤說明：
 * jie_dian屬性，保存獲取到的元素節點，返回數組,
 *
 * huo_qu_id()方法,經過id獲取元素標籤，參數是id值，將獲取到的元素對象返回給方法自己，沒法連綴
 * huo_qu_name()方法，經過標籤名稱獲取相同標籤名的元素，
 * huo_qu_class()方法，獲取相同class屬性的節點，返回包含相同class屬性的節點數組，返回給方法自己,沒法連綴
 *
 * huo_qu_name_zhi()方法，經過元素name值獲取指定元素，適用於獲取表單元素,
 * guo_lv_jie_dian()方法，獲取多個節點時，過濾jie_dian屬性裏的數組，就是過濾掉指定索引外的元素對象
 * huo_qu_zi_jie_dian()方法，獲取一個元素下的子元素
 **/


/** huo_qu_id()方法,經過id獲取元素標籤，參數是id值，將獲取到的元素對象返回給方法自己，沒法連綴
 **/
feng_zhuang_ku.prototype.huo_qu_id = function (id) {
    return document.getElementById(id);
};

/** huo_qu_name()方法，經過標籤名稱獲取相同標籤名的元素，返回包含相同標籤名的元素數組，返回給方法自己
 * 兩個參數：獲取指定元素下的相同標籤元素，參數1標籤名稱，參數2是要獲取元素的父元素
 * 一個參數：獲取頁面全部相同標籤元素，參數是標籤名稱
 **/
feng_zhuang_ku.prototype.huo_qu_name = function (tag, parentnode) {
    var node = null;
    var lin_shi = [];
    if (parentnode != undefined) {
        node = parentnode;
    } else {
        node = document;
    }
    var tags = node.getElementsByTagName(tag);
    for (var i = 0; i < tags.length; i++) {
        lin_shi.push(tags[i]);
    }
    return lin_shi;
};

/** huo_qu_class()方法，獲取相同class屬性的節點，返回包含相同class屬性的節點數組，返回給方法自己,沒法連綴
 * 一個參數：獲取整個頁面指定的class屬性節點，參數是class屬性值
 * 兩個參數：獲取指定元素區下的class屬性節點，參數1是class屬性值，參數2是要獲取class屬性節點的父元素節點
 **/
feng_zhuang_ku.prototype.huo_qu_class = function (name, parentnode) {
    var node = null;
    var lin_shi = [];
    if (parentnode != undefined) {
        node = parentnode;
    } else {
        node = document;
    }
    var all = node.getElementsByTagName('*');
    for (var i = 0; i < all.length; i++) {
        if (all[i].className == name) {
            lin_shi.push(all[i]);
        }
    }
    return lin_shi;
};

/** huo_qu_name_zhi()方法，經過元素name值獲取指定元素，參數是元素name值，返回元素相同name值對象集合，
 * 循環元素集合，將每次循環到的元素對象添加到 jie_dian屬性，適用於獲取表單元素
 **/
feng_zhuang_ku.prototype.huo_qu_name_zhi = function (name) {
    var name_zhi = document.getElementsByName(name);
    for (var i = 0; i < name_zhi.length; i++) {
        this.jie_dian.push(name_zhi[i]);
    }
    return this;
};

/** guo_lv_jie_dian()方法，獲取多個節點時，過濾jie_dian屬性裏的數組，就是過濾掉指定索引外的元素對象
 * 參數是要保留jie_dian屬性裏的對象索引
 **/
feng_zhuang_ku.prototype.guo_lv_jie_dian = function (num) {
    var element = this.jie_dian[num];
    this.jie_dian = [];
    this.jie_dian[0] = element;
    return this;
};

/** huo_qu_zi_jie_dian()方法，獲取一個元素下的子元素
 * 注意首先要獲取到父元素，在使用huo_qu_zi_jie_dian()方法
 * 參數是要獲取的，子元素(id值、class值、標籤名稱)其中同樣的字符串方式，
 * 傳參方式 '#xxx'( 表示獲取id)，'.xxx'(表示獲取class)，'xxx'(表示獲取標籤)
 **/
feng_zhuang_ku.prototype.huo_qu_zi_jie_dian = function (str) {
    var lin_shi = [];                                               //臨時數組
    for (var i = 0; i < this.jie_dian.length; i++) {               //根據父元素的長度，循環出父元素
        switch (str.charAt(0)) {                                   //判斷字符串的第一個字符是什麼
            case '#':                                              //說明是id
                lin_shi.push(this.huo_qu_id(str.substring(1)));    //獲取到父元素下的子元素id等於str的標籤，將它添加到臨時數組
                break;
            case '.':                                                     //說明是class
                var tempss = this.huo_qu_class(str.substring(1), this.jie_dian[i]);
                for (var k = 0; k < tempss.length; k++) {
                    lin_shi.push(tempss[k]);
                }
                break;
            default:                                                      //說明是標籤名稱
                var temps = this.huo_qu_name(str, this.jie_dian[i]);
                for (var j = 0; j < temps.length; j++) {
                    lin_shi.push(temps[j]);
                }
        }
    }
    this.jie_dian = lin_shi;                                               //將臨時數組替換成節點數組
    return this;
};

/**------------------------------------------------獲取元素標籤結束--------------------------------------------**/


/**------------------------------------------------元素節點操做開始--------------------------------------------**/
/**元素節點操做說明：
 * c_css()方法，給獲取到的元素設置ss樣式,或者獲取css樣式，
 * wen_ben()方法，給獲取到的元素設置文本，或者獲取文本
 * tian_jia_class()方法，給獲取到的元素添加class屬性，參數是class屬性值，能夠連綴
 * yi_chu_class()方法，給獲取到的元素移除class屬性，參數是要移除的class屬性值，能夠連綴
 * she_zhi_link_css()方法，設置link鏈接、或style內嵌、中的CSS樣式
 * yi_chu_link_css()方法，移除link鏈接、或style內嵌、中的CSS樣式
 **/


/** c_css()方法，給獲取到的元素設置ss樣式,或者獲取css樣式，
 * 兩個參數：設置樣式，參數1樣式名稱，參數2樣式值,設置的行內樣式
 * 一個參數：獲取樣式，參數是樣式名稱，沒法連綴，獲取便可用獲取行內也能夠獲取鏈接
 **/
feng_zhuang_ku.prototype.c_css = function (attr, value) {
    for (var i = 0; i < this.jie_dian.length; i++) {
        if (arguments.length == 1) {
            return getStyle(this.jie_dian[i], attr); //getStyle()函數庫函數，跨瀏覽器獲取元素Style，樣式指定屬性
        } else {
            this.jie_dian[i].style[attr] = value;
        }
    }
    return this;
};

/** wen_ben()方法，給獲取到的元素設置文本，或者獲取文本
 * 有參：設置文本，參數是要設置的文本字符串。
 * 無參：獲取文本。沒法連綴
 **/
feng_zhuang_ku.prototype.wen_ben = function (str) {
    for (var i = 0; i < this.jie_dian.length; i++) {
        if (arguments.length == 0) {
            return this.jie_dian[i].innerHTML;
        }
        this.jie_dian[i].innerHTML = str;
    }
    return this;
};

/** tian_jia_class()方法，給獲取到的元素添加class屬性，參數是class屬性值，能夠連綴
 **/
feng_zhuang_ku.prototype.tian_jia_class = function (classname) {
    for (var i = 0; i < this.jie_dian.length; i++) {
        if (hasClass(this.jie_dian[i], classname)) {   //hasClass()函數庫函數，判斷一個元素的class屬性值是否存在
            this.jie_dian[i].className += ' ' + classname;
        }
    }
    return this;
};

/** yi_chu_class()方法，給獲取到的元素移除class屬性，參數是要移除的class屬性值，能夠連綴
 **/
feng_zhuang_ku.prototype.yi_chu_class = function (classname) {
    for (var i = 0; i < this.jie_dian.length; i++) {
        if (hasClass(this.jie_dian[i], classname)) {
            this.jie_dian[i].className = this.jie_dian[i].className.replace(new RegExp('(\\s|^)' + classname + '(\\s|$)'), ' ');
        }
    }
    return this;
};

/** she_zhi_link_css()方法，設置link鏈接、或style內嵌、中的CSS樣式
 * 在Web應用中，不多用到添加CSS規則和移除CSS規則，通常只用行內和Class；由於添加和刪除本來的規則會破壞整個CSS的結構，因此使用須要很是當心。
 * 直接在庫對象下使用  如：$().she_zhi_link_css()
 * 四個參數：
 * 參數1，樣式表索引位置，就是要操做的樣式表位置索引，第幾個樣式表【數值】
 * 參數2，要添加的選擇器名稱，【字符串】
 * 參數3，要添加的樣式名稱和值，如：background:#ff2a16 【字符串】
 * 參數4，將樣式和選擇器添加到樣式表什麼位置，【數值】
 **/
feng_zhuang_ku.prototype.she_zhi_link_css = function (num, selectorText, cssText, position) {
    var sheet = document.styleSheets[num];
    if (typeof sheet.insertRule != 'undefined') {
        sheet.insertRule(selectorText + "{" + cssText + "}", position);
    } else if (typeof sheet.addRule != 'undefined') {
        sheet.addRule(selectorText, cssText, position);
    }
    return this;
};

/** yi_chu_link_css()方法，移除link鏈接、或style內嵌、中的CSS樣式
 * 在Web應用中，不多用到添加CSS規則和移除CSS規則，通常只用行內和Class；由於添加和刪除本來的規則會破壞整個CSS的結構，因此使用須要很是當心。
 * 直接在庫對象下使用
 * 兩個參數：
 * 參數1，樣式表索引位置，就是要操做的樣式表位置索引，第幾個樣式表【數值】
 * 參數2，刪除樣式表裏的第幾個選擇器【數值】
 **/
feng_zhuang_ku.prototype.yi_chu_link_css = function (num, position) {
    var sheet = document.styleSheets[num];
    if (typeof sheet.deleteRule != 'undefined') {
        sheet.deleteRule(position);
    } else if (typeof sheet.removeRule) {
        sheet.removeRule(position);
    }
    return this;
};
/**------------------------------------------------元素節點操做結束--------------------------------------------**/


/**------------------------------------------------元素事件開始--------------------------------------------**/
/**元素事件說明：
 * shu_biao_yi_ru_yi_chu()方法，給元素設置鼠標移入移出事件，接收兩個參數，參數是移入和移出時的執行函數(包含代碼)
 * xian_shi()方法，設置元素顯示,無參
 * yin_cang()方法，設置元素隱藏,無參
 * on_click()方法，給獲取到的元素添加一個點擊事件，參數是一個匿名函數（包含函數功能），
 * yuan_su_ju_zhong()方法，將獲取到的區塊元素居中到頁面，
 * chuang_kou_shi_jian()方法，瀏覽器窗口事件，當窗口的大小變化時觸發函數
 * zhe_zhao_suo_ping()方法，將一個區塊元素設置成遮罩鎖屏區塊
 **/


/** shu_biao_yi_ru_yi_chu()方法，給元素設置鼠標移入移出事件，接收兩個參數，參數是移入和移出時的執行函數(包含代碼)
 *參數1是移入時的執行函數(包含代碼)
 *參數2是移出時的執行函數(包含代碼)
 **/
feng_zhuang_ku.prototype.shu_biao_yi_ru_yi_chu = function (yi_ru, yi_chu) {
    for (var i = 0; i < this.jie_dian.length; i++) {
        addEvent(this.jie_dian[i], 'mouseover', yi_ru);
        addEvent(this.jie_dian[i], 'mouseout', yi_chu);
    }
    return this;
};

/** xian_shi()方法，設置元素顯示,無參
 **/
feng_zhuang_ku.prototype.xian_shi = function () {
    for (var i = 0; i < this.jie_dian.length; i++) {
        this.jie_dian[i].style.display = 'block';
    }
    return this;
};

/** yin_cang()方法，設置元素隱藏,無參
 **/
feng_zhuang_ku.prototype.yin_cang = function () {
    for (var i = 0; i < this.jie_dian.length; i++) {
        this.jie_dian[i].style.display = 'none';
        document.documentElement.style.overflow = 'auto';
        removeEvent(window, 'scroll', scrollTop); //遮罩鎖屏時有用
    }
    return this;
};

/** on_click()方法，給獲取到的元素添加一個點擊事件，參數是一個匿名函數（包含函數功能），
 * 循環jie_dian屬性裏的節點，將每次循環的節點添加元素點擊事件
 **/
feng_zhuang_ku.prototype.on_click = function (fu) {
    for (var i = 0; i < this.jie_dian.length; i++) {
        addEvent(this.jie_dian[i], 'click', fu);
    }
    return this;
};

/** yuan_su_ju_zhong()方法，將獲取到的區塊元素居中到頁面，
 * 注意：使用此方法時，首先要在css裏將目標區塊設置成(絕對定位,position: absolute;)
 **/
feng_zhuang_ku.prototype.yuan_su_ju_zhong = function () {
    if (this.jie_dian.length == 1) {
        var yan_su = null;
        for (var i = 0; i < this.jie_dian.length; i++) {
            yan_su = this.jie_dian[i];
        }
        var y_style = getStyle(yan_su, 'display'); //getStyle()函數庫函數，跨瀏覽器獲取元素Style，樣式指定屬性
        if (y_style === "none") {
            yan_su.style.display = "block";
        }
        var width = yan_su.offsetWidth;
        var height = yan_su.offsetHeight;
        if (y_style === "none") {
            yan_su.style.display = "none";
        }
        var chang_w = getInner().width;
        var chang_h = getInner().height;
        var top = (chang_h - height) / 2;
        var left = (chang_w - width) / 2;
        for (var ii = 0; ii < this.jie_dian.length; ii++) {
            this.jie_dian[ii].style.top = top + 'px';
            this.jie_dian[ii].style.left = left + 'px';
        }
    } else {
        alert("區塊元素頁面居中,只能設置一個區塊元素，目前jie_dian數組裏是多個元素請檢查！")
    }
    return this;
};

/** chuang_kou_shi_jian()方法，瀏覽器窗口事件，當窗口的大小變化時觸發函數
 * 接收一個參數，就是觸發時要執行的函數（包含函數功能）
 **/
feng_zhuang_ku.prototype.chuang_kou_shi_jian = function (fn) {
    for (var i = 0; i < this.jie_dian.length; i++) {
        var yan_su = this.jie_dian[i];
    }
    addEvent(window, 'resize', function () {
        fn();
        if (yan_su.offsetLeft > getInner().width - yan_su.offsetWidth) {
            yan_su.style.left = getInner().width - yan_su.offsetWidth + 'px';
        }
        if (yan_su.offsetTop > getInner().height - yan_su.offsetHeight) {
            yan_su.style.top = getInner().height - yan_su.offsetHeight + 'px';
        }
    });
    return this;
};

/** zhe_zhao_suo_ping()方法，將一個區塊元素設置成遮罩鎖屏區塊
 * 注意：通常須要在css文件將元素設置成隱藏
 **/
feng_zhuang_ku.prototype.zhe_zhao_suo_ping = function () {
    if (this.jie_dian.length == 1) {
        var yan_su = null;
        for (var i = 0; i < this.jie_dian.length; i++) {
            yan_su = this.jie_dian[i];
        }
        var chang_w = getInner().width;  //getInner()函數庫函數，跨瀏覽器獲取瀏覽器視窗大小
        var chang_h = getInner().height;
        yan_su.style.width = chang_w + 'px';
        yan_su.style.height = chang_h + 'px';
        yan_su.style.position = 'absolute';
        yan_su.style.top = '0';
        yan_su.style.left = '0';
        var y_style = getStyle(yan_su, 'display'); //getStyle()函數庫函數，跨瀏覽器獲取元素Style，樣式指定屬性
        if (y_style === "block") {
            document.documentElement.style.overflow = 'hidden';
            addEvent(window, 'scroll', scrollTop);
        } else if (y_style === 'none') {
            document.documentElement.style.overflow = 'auto';
        }
    } else {
        alert("遮罩鎖屏區塊,只能設置一個區塊元素，目前jie_dian數組裏是多個元素請檢查！")
    }
    return this;
};


/**------------------------------------------------元素事件結束--------------------------------------------**/


/**------------------------------------------------插件入口開始--------------------------------------------**/
/** 插件入口，簡單的理解就是經過extend()方法，向此基礎庫添加一個原型方法
 *  此extend()方法，通常是給插件文件使用的，插件就是經過extend()方法，將插件方法添加到基礎庫原型的
 *  接收兩個參數
 *  參數1是傳入要添加的方法名稱
 *  參數2是此方法的執行函數（包含代碼）
 **/
feng_zhuang_ku.prototype.extend = function (name, fn) {
    feng_zhuang_ku.prototype[name] = fn;
};
/**------------------------------------------------插件入口結束--------------------------------------------**/

HTML代碼java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript講解</title>
    <link rel="stylesheet" title='xxx' type="text/css" href="1.css">
    <script type="text/javascript" src="feng_zhuang_ku/han_shu/han_shu.js" charset="utf-8"></script>
    <script type="text/javascript" src="feng_zhuang_ku/feng_zhuang_ku.js" charset="utf-8"></script>
    <script type="text/javascript" src="feng_zhuang_ku/cha_jian/tuo_zhuai.js" charset="utf-8"></script>
    <script type="text/javascript" src="1.js" charset="utf-8"></script>
</head>
<body>
<div id="tou">
    <div class="logo"><img src="img/logo.gif" alt=""></div>
    <div class="ge_ren_zhong_xin">我的中心
        <ul>
            <li><a href="#">設置</a></li>
            <li><a href="#">換膚</a></li>
            <li><a href="#">幫助</a></li>
            <li><a href="#">退出</a></li>
        </ul>
    </div>
    <div class="deng_lu">登陸</div>
</div>
<div id="login">
    <h2 class="tbu"><img src="img/close.png" alt="" class="close" />網站登陸</h2>
    <div class="user">賬 號：<input type="text" name="user" class="text" /></div>
    <div class="pass">密 碼：<input type="password" name="pass" class="text" /></div>
    <div class="button"><input type="button" class="submit" value="" /></div>
    <div class="other">註冊新用戶 | 忘記密碼？</div>
</div>
<div id="suo_ping">1</div>
<input type="button" value="按鈕" id="button" />
<a href="http://www.yc60.com" id="a">瓢城Web俱樂部</a>

<div id="box">box</div>


<div id="jkf">
    <p>
        <span class="a">pspan</span>
        <span class="a">pspan</span>
        <span class="b">pspan</span>
    </p>


    <p>
        <span class="a">pspan</span>
        <span>pspan</span>
        <span id="q">pspan</span>
    </p>

    <div>
        <span class="a">pspan</span>
        <span>pspan</span>
        <span>pspan</span>
    </div>
</div>
<p>
    <span class="a">pspan</span>
    <span class="a">pspan</span>
    <span class="b">pspan</span>
</p>

</body>
</html>

css代碼node

@charset "utf-8";
* {
    margin: 0;
    padding: 0;
    /*color: #ff583d;*/
}
body{
    background: url("img/header_bg.png") repeat-x;
    font-size:14px;
}
#tou{
    width: 900px;
    height: 30px;
    margin: 0 auto;
}
.logo{
    width: 100px;
    height: 30px;
    float: left;
}
.ge_ren_zhong_xin{
    position: relative;
    width: 70px;
    height: 30px;
    line-height: 30px;
    float: right;
    background: url("img/arrow.png") no-repeat right center;
    cursor: pointer;
}
ul{
    width: 100px;
    height: 110px;
    list-style-type: none;
    position: absolute;
    top:30px;
    right: -15px;
    background:#FBF7E1;
    border:1px solid #999;
    border-top:none;
    padding:10px 0 0 0;
    display:none;
}
ul li {
    height:25px;
    line-height:25px;
    text-indent:20px;
    letter-spacing:1px;
}
ul li a {
    display:block;
    text-decoration:none;
    color:#333;
    background:url("img/arrow3.gif") no-repeat 5px 45%;
}
ul li a:hover {
    background:#fc0 url("img/arrow4.gif") no-repeat 5px 45%;
}


/*登陸*/
#tou .deng_lu {
    width: 30px;
    height: 30px;
    float: right;
    line-height: 30px;
    margin-right: 10px;
    cursor: pointer;
}
/*登陸框*/
#login{
    width: 350px;
    height: 250px;
    border: 1px solid #ccc;
    position:absolute;
    display: none;
    z-index: 9999;
    background-color: #fff;
}
#login h2{
    background: rgba(0, 0, 0, 0) url("img/login_header.png") repeat-x scroll 0 0;
    border-bottom: 1px solid #ccc;
    color: #666;
    font-size: 14px;
    height: 40px;
    line-height : 40px;
    text-align: center;
    letter-spacing: 1px;
    margin: 0 0 20px;
    cursor: move;
}
#login h2 img{
    cursor: pointer;
    float: right;
    position: relative;
    right: 8px;
    top: 14px;
}
#login div.user, #login div.pass {
    color: #666;
    font-size: 14px;
    padding: 5px 0;
    text-align: center;
}
#login input.text {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #ccc;
    font-size: 14px;
    height: 25px;
    width: 200px;
}
#login .button {
    padding: 20px 0;
    text-align: center;
}
#login input.submit {
    background: rgba(0, 0, 0, 0) url("img/login_button.png") no-repeat scroll 0 0;
    border: medium none;
    cursor: pointer;
    height: 30px;
    width: 107px;
}
#login .other {
    color: #666;
    padding: 15px 10px;
    text-align: right;
}
/*遮罩鎖屏區塊*/
#suo_ping{
    z-index: 9998; /*注意：若是遮罩層上面有元素，它的層級要大於9998*/
    background: #000;
    filter: alpha(opacity=50);
    opacity: 0.5;
    display: none;
}

前臺js代碼數組

//前臺調用代碼
addEvent(window, 'load', function () {
    //我的中心和登陸框
    $('#tou .ge_ren_zhong_xin').shu_biao_yi_ru_yi_chu(function () {                     //獲取到我的中心元素，執行鼠標移入移除方法
        $(this).c_css('background', 'url(img/arrow2.png) no-repeat right center');     //移入鼠標改變人中心背景圖片
        $('.ge_ren_zhong_xin ul').xian_shi();                                         //移入鼠標顯示我的中心下拉區塊
    }, function () {
        $(this).c_css('background', 'url(img/arrow.png) no-repeat right center');    //移出鼠標改變人中心背景圖片
        $('.ge_ren_zhong_xin ul').yin_cang();                                          //移出鼠標隱藏我的中心下拉區塊
    });
    $('#login .close').on_click(function () {
        $('#login').yin_cang();
        $('#suo_ping').yin_cang();
    });
    $('#tou .deng_lu').on_click(function () {                                          //獲取登陸，添加點擊事件
        $('#login').xian_shi().yuan_su_ju_zhong().chuang_kou_shi_jian(function () {  //點擊後，顯示登陸框，登陸框居中，添加窗口事件
            $('#login').yuan_su_ju_zhong();                                              //窗口改變時再次執行登陸框居中
            $('#suo_ping').zhe_zhao_suo_ping()
        });
        $('#suo_ping').xian_shi().zhe_zhao_suo_ping();
    });
    $('#login').tuo_zhuai('tbu');

    $('#jkf p #q').c_css('font-size','80px').c_css('color','#ff583d');





});