国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

導航欄 jQuery 和 native JS

niceforbear / 440人閱讀

摘要:最近在練習原生,于是想把幾個月之前用寫的一個導航的功能,用原生實現一遍。寫不到一年,沒做兼容,求大神輕噴,有寫的不好的,求指教為展開用時為收起用時

最近在練習原生JS,于是想把幾個月之前用jQuery寫的一個導航的功能,用原生JS實現一遍。

寫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為展開用時
        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為收起用時
        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);
}

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/91583.html

相關文章

  • 手把手教你如何自定義 React Native 底部導航

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

    LiuZh 評論0 收藏0
  • 加推Weex實踐之路(上)

    摘要:我們參考小程序的設計思路進行了優化升級,為每一個需要特有化配置的頁面添加一個格式的配置文件,配置文件包括導航欄的配置頁面級別的配置跳轉的配置等,將配置工程化標準化。設置導航欄按鈕包含按鈕樣式的數組通過完成按鈕事件的回調。一、背景1.為什么是Weex在公司快速發展的大環境下,App的更新迭代高速、高頻,技術團隊平均兩周便可誕生一款中型App,但App團隊只有6個人(iOS 、Android各3...

    shuibo 評論0 收藏0
  • 【布局篇】react-native

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

    WalkerXu 評論0 收藏0
  • React Native 簡介:用 JavaScript 搭建 iOS 應用(2)

    摘要:分別命名文件為和。上述代碼指定了當某列書籍被點擊時響應一個回調函數。當組件的值改變時例如用戶鍵入一些文本,將會調用組件,同時為組件指定一個回調函數。在調用時,回調函數和利用用戶輸入的數據將設置和屬性。 【編者按】本篇文章的作者是 Joyce Echessa——渥合數位服務創辦人,畢業于臺灣大學,近年來專注于協助客戶進行 App 軟體以及網站開發。本篇文章中,作者介紹通過 React N...

    n7then 評論0 收藏0

發表評論

0條評論

niceforbear

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<