第一百四十八節，封裝庫--JavaScript，菜單切換

第一百四十八節，封裝庫--JavaScript，菜單切換

 

首先在封裝庫封裝點擊切換方法

 

/** dian_ji_qie_huan()方法，設置點擊切換，將元素設置成點擊切換，也就是點擊目標元素後，循環執行方法裏的函數
 * 參數是點擊後要執行的函數，能夠是多個函數，點擊一次循環執行一個函數，從第一個開始，循環完畢後再次循環從第一個開始
 **/
feng_zhuang_ku.prototype.dian_ji_qie_huan = function () {
    for (var i = 0; i < this.jie_dian.length; i++) {
        (function (jiedian, args) {
            var count = 0;                                          //計數器
            addEvent(jiedian, 'click', function () {                //給對象添加點擊事件
                args[count++ % args.length].call(this);             //點擊後計數器數值求於做爲下標執行傳入的函數，計數器在累加,將對象傳入
            });
        })(this.jie_dian[i], arguments);                            //經過arguments接收傳入方法的函數
    }
    return this;
};

 

 

菜單切換效果圖

html

<div id="sidebar">
        <h2>教育博文1</h2>
        <ul>
            <li><a href="###">靠本身95 後女生被16 所國外名校錄取</a></li>
            <li><a href="###">00 後的成長煩惱：壓力巨大成隱形殺手</a></li>
            <li><a href="###">一年自學MIT 的33 門課? 瘋狂學習方法</a></li>
            <li><a href="###">申請赴美讀研人數降低5% 7 年來首遇冷</a></li>
            <li><a href="###">西政「萌招聘」秀出辣椒與美女被贊</a></li>
        </ul>
        <h2>教育博文2</h2>
        <ul>
            <li><a href="###">靠本身95 後女生被16 所國外名校錄取</a></li>
            <li><a href="###">00 後的成長煩惱：壓力巨大成隱形殺手</a></li>
            <li><a href="###">一年自學MIT 的33 門課? 瘋狂學習方法</a></li>
            <li><a href="###">申請赴美讀研人數降低5% 7 年來首遇冷</a></li>
            <li><a href="###">西政「萌招聘」秀出辣椒與美女被贊</a></li>
        </ul>
        <h2>教育博文3</h2>
        <ul>
            <li><a href="###">靠本身95 後女生被16 所國外名校錄取</a></li>
            <li><a href="###">00 後的成長煩惱：壓力巨大成隱形殺手</a></li>
            <li><a href="###">一年自學MIT 的33 門課? 瘋狂學習方法</a></li>
            <li><a href="###">申請赴美讀研人數降低5% 7 年來首遇冷</a></li>
            <li><a href="###">西政「萌招聘」秀出辣椒與美女被贊</a></li>
        </ul>
    </div>

css

/*左邊列表*/
#sidebar {
    width:250px;
    height:500px;
    float:left;
}
#sidebar h2 {
    width:248px;
    height:30px;
    line-height:30px;
    font-size:14px;
    background:url(img/side_h.png);
    text-indent:10px;
    border:1px solid #ccc;
    border-bottom:none;
    margin:0;
}
#sidebar ul {
    height:150px;
    border:1px solid #ccc;
    margin:0 0 10px 0;
    overflow:hidden;
    opacity:1;
    filter:alpha(opacity=100);
}
#sidebar ul li {
    height:30px;
    line-height:30px;
    background:url(img/arrow4.gif) no-repeat 12px 45%;
    text-indent:30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#sidebar ul li a {
    text-decoration:none;
    color:#333;
}

前臺js

// 左側列表
    $('#sidebar h2').dian_ji_qie_huan(function () {
        $(this).xia_jd().yi_dong_tou_ming({
            t : 50,
            step : 10,
            mul:{
                h:0,
                o:0
            }
        });
    },function () {
        $(this).xia_jd().yi_dong_tou_ming({
            t : 50,
            step : 10,
            mul:{
                h:150,
                o:100
            }
        });
    })

首先引入封裝庫