摘要:最近在練習原生,于是想把幾個月之前用寫的一個導航的功能,用原生實現一遍。寫不到一年,沒做兼容,求大神輕噴,有寫的不好的,求指教為展開用時為收起用時
最近在練習原生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 Navigation 默認 Tab 組件看起來太平淡,或者想創造一些更現代的東西,那么你想法就和我一樣。 在本指南中,我將向你演示如何創建自定義...
摘要:我們參考小程序的設計思路進行了優化升級,為每一個需要特有化配置的頁面添加一個格式的配置文件,配置文件包括導航欄的配置頁面級別的配置跳轉的配置等,將配置工程化標準化。設置導航欄按鈕包含按鈕樣式的數組通過完成按鈕事件的回調。一、背景1.為什么是Weex在公司快速發展的大環境下,App的更新迭代高速、高頻,技術團隊平均兩周便可誕生一款中型App,但App團隊只有6個人(iOS 、Android各3...
摘要:簡介這里以三種經典布局來講解布局概念,主要以為主,中有兩個基本元素與,分別類似于端和,用于布局和修飾。 簡介 這里以三種經典布局來講解react-native布局概念,主要以flexbox為主,react native中有兩個基本元素< View >與< Text >,分別類似于web端div和span,用于布局和修飾。需要注意的是,react native不是所有的CSS屬性都支持,...
摘要:分別命名文件為和。上述代碼指定了當某列書籍被點擊時響應一個回調函數。當組件的值改變時例如用戶鍵入一些文本,將會調用組件,同時為組件指定一個回調函數。在調用時,回調函數和利用用戶輸入的數據將設置和屬性。 【編者按】本篇文章的作者是 Joyce Echessa——渥合數位服務創辦人,畢業于臺灣大學,近年來專注于協助客戶進行 App 軟體以及網站開發。本篇文章中,作者介紹通過 React N...
閱讀 3730·2021-11-24 09:39
閱讀 1891·2021-11-16 11:45
閱讀 620·2021-11-16 11:45
閱讀 1040·2021-10-11 10:58
閱讀 2484·2021-09-09 11:51
閱讀 1946·2019-08-30 15:54
閱讀 695·2019-08-29 13:13
閱讀 3472·2019-08-26 12:18