如何通過觸摸/點擊屏幕上的任何位置來隱藏/顯示元素？

我正在爲所有桌面/ iPad/iPhone製作網站。在一頁中，頁面上的頁眉和頁腳會在頁面加載後5秒內出現，然後它會自動消失。如果我們點擊/觸摸屏幕上的任何地方，它也會顯示/隱藏切換。當頁眉和頁腳將被看到時，頁面的區域將像我們在Lightbox中看到的那樣變暗。如何通過觸摸/點擊屏幕上的任何位置來隱藏/顯示元素？

http://jsfiddle.net/jitendravyas/yZbTK/2/

酷似iPad的默認我想效果「照片」應用

enter image description here

來源

2011-11-12 Jitendra Vyas

我想這是你所追求的。在初始頁面加載後，我們在x秒後淡出。如果用戶單擊，則隱藏在工具欄中，或者如果顯示則淡出。如果用戶在工具欄中淡入淡出，但在x秒內沒有做任何事情，我們將淡出它。

我更新了一些改進的答案。

http://jsfiddle.net/yZbTK/11/

http://jsfiddle.net/yZbTK/11/show - 爲iPad

全屏我會一類分配給你會淡入/淡出控制。這樣您可以快速輕鬆地收集它們。在我最初的代碼示例中，使用id來標識它們確實不太好。

var timer; 
var timeVisible = 5000; 
timeFadeout(); 

function timeFadeout() { 
    timer = setTimeout(function() { 
     $('.controls').fadeOut();   
    }, timeVisible); 
} 

$('html').click(function() { 
    clearTimeout(timer); 
    if ($('.controls:visible').length) { 
     $('.controls').fadeOut(); 
    } 
    else { 
     $('.controls').fadeIn(); 
     timeFadeout(); 
    } 
});

來源

2011-11-12 16:05:25 mrtsherman

+1非常接近。但工具欄不會回來在iPad。我想讓這種效果在所有最新的桌面和移動瀏覽器中都能正常工作。並帶有觸摸屏 –

在您的計算機上工作正常嗎？讓我去抓住我的iPad，看看我能否弄清楚發生了什麼問題。 – mrtsherman

我剛剛在我的Android 2.3.6中檢查它工作正常。所以我認爲只有iOS它不能正常工作 –

一個簡短的解決方案是簡單地點擊事件就可以補充人體和切換頁眉和頁腳：

$('body').click(function() { 
    $('#header').toggle(); 
    $('#footer').toggle(); 
});

看到這裏也：http://jsfiddle.net/Sgoettschkes/yZbTK/4/

要添加「朦朧「，你可以稱它爲絕對位置和不透明度，也可以如上所述切換。我打了一下週圍，並創造了這個：http://jsfiddle.net/Sgoettschkes/yZbTK/8/

來源

2011-11-12 16:13:01 Sgoettschkes

不錯。但我想在5秒後自動隱藏它們。如果我們不點擊或觸摸屏幕 –

它也不適用於iPad –

編輯：

var countDown=5; 

$('body').click(function() { 
    .... 
    if (countDown < 1) { 
     ... 
    } 
} 

var cleanUp = setInterval(function() { 
    countDown--; 
    if (countDown < 1) { 
     ... 
     clearInterval(cleanUp); 
    } 
},1000);

應該這樣做！

來源

2011-11-12 16:22:53

如何通過觸摸/點擊屏幕上的任何位置來隱藏/顯示元素？

回答

相關問題