成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

導(dǎo)航欄 jQuery 和 native JS

niceforbear / 442人閱讀

摘要：最近在練習(xí)原生，于是想把幾個(gè)月之前用寫的一個(gè)導(dǎo)航的功能，用原生實(shí)現(xiàn)一遍。寫不到一年，沒做兼容，求大神輕噴，有寫的不好的，求指教為展開用時(shí)為收起用時(shí)

最近在練習(xí)原生JS，于是想把幾個(gè)月之前用jQuery寫的一個(gè)導(dǎo)航的功能，用原生JS實(shí)現(xiàn)一遍。

寫JS不到一年，沒做IE8兼容，求大神輕噴，有寫的不好的，求指教~~

jQuery：

$(".navigation li").addClass("displayNone");

$(".nav_icon").click(function(){
    open_nav();
    return false;
});

$(window).click(function(){
    close_nav();
});
  
function open_nav(){
    $(".navigation").removeClass("displayNone");
    $(".navigation").css("visibility","hidden");
    $(".navigation li").each(function(i){
        var nav_li = $(this);
        setTimeout(function(){
            nav_li.slideDown("fast"); 
        },100+100*i);
        
    });
    $(".navigation").css("visibility","visible");
}

function close_nav(){
    var li_count = $(".navigation li").length;
    $(".navigation li").each(function(i){
        var nav_li = $(this);
        setTimeout(function(){
            nav_li.slideUp("fast");
        },100*li_count-100*i);
    });
}

native JS (IE9+):

var Navigation = function(){
    var el = this.el = document.getElementsByClassName("navigation")[0];

    var getCurrentHeight = function(){
        if(window.getComputedStyle){
            return window.getComputedStyle(el,null).height;
        }else if(el.currentStyle){
            return el.currentStyle.height;
        }else{
            return el.offsetHeight;
        }
    };

    var navHeight = parseInt(getCurrentHeight());

    this.openList = function(speed){ //speed為展開用時(shí)
        el.style.visibility = "visible";
        var currentHeight = document.getElementsByClassName("navigation")[0].style.height = 0;
        var openTimer = setInterval(function(){
            currentHeight += navHeight*(10/speed);
            el.style.height = currentHeight + "px";
            if(currentHeight >= navHeight){
                el.style.height = navHeight + "px";
                   clearInterval(openTimer);
            }
        },10);
        navStatus ++;
    };
    this.closeList = function(speed){ //speed為收起用時(shí)
        var currentHeight = parseInt(getCurrentHeight()) ;

        var closeTimer = setInterval(function(){
            currentHeight -= navHeight*(10/speed);
            el.style.height = currentHeight + "px";
            if(currentHeight <= 0){
                el.style.height = "0px";
                clearInterval(closeTimer);
            }
        },10);
        navStatus = 0;
    };
}

var navigation = new Navigation();
var navStatus = 0;

document.getElementsByClassName("nav_icon")[0].onclick = function(e){
    if(navStatus == 0){
        navigation.openList(450);
        window.event ? window.event.cancelBubble = true : e.stopPropagation();
    }else{
        navigation.closeList(450);
    }
}    
window.onclick = function(){
    navigation.closeList(450);
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91583.html

相關(guān)文章

  • 手把手教你如何自定義 React Native 底部導(dǎo)航欄

    摘要：在本指南中，我將向你演示如何創(chuàng)建自定義標(biāo)簽欄以并與一起使用。我們將導(dǎo)入并使用創(chuàng)建默認(rèn)選項(xiàng)卡導(dǎo)航器。接下來，我們將添加實(shí)際的自定義標(biāo)簽欄組件。例如，當(dāng)前的實(shí)現(xiàn)假設(shè)選項(xiàng)卡導(dǎo)航器中總會(huì)有個(gè)，聚光燈顏色在選項(xiàng)卡欄組件中是寫死。 如果你覺得 React Navigation 默認(rèn) Tab 組件看起來太平淡，或者想創(chuàng)造一些更現(xiàn)代的東西，那么你想法就和我一樣。 在本指南中，我將向你演示如何創(chuàng)建自定義...

    LiuZh 評(píng)論0 收藏0

  • 加推Weex實(shí)踐之路（上）

    摘要：我們參考小程序的設(shè)計(jì)思路進(jìn)行了優(yōu)化升級(jí)，為每一個(gè)需要特有化配置的頁(yè)面添加一個(gè)格式的配置文件，配置文件包括導(dǎo)航欄的配置頁(yè)面級(jí)別的配置跳轉(zhuǎn)的配置等，將配置工程化標(biāo)準(zhǔn)化。設(shè)置導(dǎo)航欄按鈕包含按鈕樣式的數(shù)組通過完成按鈕事件的回調(diào)。一、背景1.為什么是Weex在公司快速發(fā)展的大環(huán)境下，App的更新迭代高速、高頻，技術(shù)團(tuán)隊(duì)平均兩周便可誕生一款中型App，但App團(tuán)隊(duì)只有6個(gè)人（iOS 、Android各3...

    shuibo 評(píng)論0 收藏0

  • 【布局篇】react-native

    摘要：簡(jiǎn)介這里以三種經(jīng)典布局來講解布局概念，主要以為主，中有兩個(gè)基本元素與，分別類似于端和，用于布局和修飾。 簡(jiǎn)介 這里以三種經(jīng)典布局來講解react-native布局概念，主要以flexbox為主，react native中有兩個(gè)基本元素< View >與< Text >，分別類似于web端div和span，用于布局和修飾。需要注意的是，react native不是所有的CSS屬性都支持，...

    WalkerXu 評(píng)論0 收藏0

  • React Native 簡(jiǎn)介：用 JavaScript 搭建 iOS 應(yīng)用(2)

    摘要：分別命名文件為和。上述代碼指定了當(dāng)某列書籍被點(diǎn)擊時(shí)響應(yīng)一個(gè)回調(diào)函數(shù)。當(dāng)組件的值改變時(shí)例如用戶鍵入一些文本，將會(huì)調(diào)用組件，同時(shí)為組件指定一個(gè)回調(diào)函數(shù)。在調(diào)用時(shí)，回調(diào)函數(shù)和利用用戶輸入的數(shù)據(jù)將設(shè)置和屬性。 【編者按】本篇文章的作者是 Joyce Echessa——渥合數(shù)位服務(wù)創(chuàng)辦人，畢業(yè)于臺(tái)灣大學(xué)，近年來專注于協(xié)助客戶進(jìn)行 App 軟體以及網(wǎng)站開發(fā)。本篇文章中，作者介紹通過 React N...

    n7then 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<