js判斷橫豎屏及禁止瀏覽器滑動條示例
更新時間：2014年04月29日 17:13:48 作者：
這篇文章主要介紹了使用js如何判斷橫豎屏及禁止瀏覽器滑動條,需要的朋友可以參考下
復制代碼 代碼如下:
var $horizontal = $('.horizontal_screen') ; //可自定義橫屏模式提示樣式
var $document = $(document) ;
var preventDefault = function(e) {
e.preventDefault();
};
var touchstart = function(e) {
$document.on('touchstart touchmove', preventDefault);
};
var touchend = function(e) {
$document.off('touchstart touchmove', preventDefault);
};
function listener(type){
if('add' == type){
//豎屏模式
$horizontal.addClass('hide');
$document.off('touchstart', touchstart);
$document.off('touchend', touchend);
}else{
//橫屏模式
$horizontal.removeClass('hide');
$document.on('touchstart', touchstart);
$document.on('touchend', touchend);
}
}
function orientationChange(){
switch(window.orientation) {
//豎屏模式
case 0:
case 180:
listener('add');
break;
//橫屏模式
case -90:
case 90:
listener('remove');
break;
}
}
$(window).on("onorientationchange" in window ? "orientationchange" : "resize", orientationChange);
$document.ready(function(){
//以橫屏模式進入界面，提示只支持豎屏
if(window.orientation == 90 || window.orientation == -90){
listener('remove');
}
});
相關(guān)文章
這篇文章主要介紹了JS實現(xiàn)模糊查詢帶下拉匹配效果,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
淺談Javascript鼠標和滾輪事件,鼠標事件也許是web頁面當中最常用到的事件，因為鼠標是最常用的導航設(shè)備2012-06-06
這篇文章主要介紹了JS引用傳遞與值傳遞的區(qū)別與用法,結(jié)合實例形式較為詳細的對比分析了javascript引用傳遞與值傳遞的原理、區(qū)別、使用方法及相關(guān)操作注意事項,需要的朋友可以參考下2018-06-06
window onload加載多個同時使用，想必有很多人沒有用過吧，接下來為大家詳細介紹下具體的使用方法，感興趣的朋友可以參考下2013-04-04
所謂的條件渲染就是判斷是否需要把代碼渲染到展示頁面上,下面這篇文章主要給大家介紹了關(guān)于微信小程序條件渲染的相關(guān)資料,文中通過實例代碼和圖文介紹的非常詳細,需要的朋友可以參考下2022-08-08
chrome瀏覽器不支持onmouseleave事件的解決技巧
發(fā)現(xiàn)給div加的 onmouseleave事件在chrome 中不起效果，下面與大家分享下具體的解決方法,不會的朋友可以了解下哈，希望對大家有所幫助2013-05-05
父元素與子iframe相互獲取變量和元素對象的具體實現(xiàn)
父元素與子iframe相互獲取變量和元素對象的方法有很多,本文提供了一些不錯的示例另收集網(wǎng)上的一些，可以參考下2013-10-10
Promise?提供了一種優(yōu)雅的方法來處理?JS?中的異步操作。這也是避免“回調(diào)地獄”的解決方案。然而，并沒有多少開發(fā)人員了解其中的內(nèi)容。因此，許多人在實踐中往往會犯錯誤。在本文中，介紹一下使用?promise?時的五個常見錯誤，希望大家能夠避免2022-11-11
使用利用事件冒泡委托給列表的父節(jié)點去處理的方式第二種方式就是使用閉包了，感興趣的你可以參考下本文，或許對你學習js有所幫助2013-03-03
這篇文章主要為大家詳細介紹了Bootstrap實現(xiàn)下拉菜單效果的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-04-04