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');
}
});

相关文章

  • JS实现模糊查询带下拉匹配效果

    JS实现模糊查询带下拉匹配效果

    这篇文章主要介绍了JS实现模糊查询带下拉匹配效果,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • 浅谈Javascript鼠标和滚轮事件

    浅谈Javascript鼠标和滚轮事件

    浅谈Javascript鼠标和滚轮事件,鼠标事件也许是web页面当中最常用到的事件,因为鼠标是最常用的导航设备
    2012-06-06
  • JS引用传递与值传递的区别与用法分析

    JS引用传递与值传递的区别与用法分析

    这篇文章主要介绍了JS引用传递与值传递的区别与用法,结合实例形式较为详细的对比分析了javascript引用传递与值传递的原理、区别、使用方法及相关操作注意事项,需要的朋友可以参考下
    2018-06-06
  • 同时使用n个window onload加载实例介绍

    同时使用n个window onload加载实例介绍

    window onload加载多个同时使用,想必有很多人没有用过吧,接下来为大家详细介绍下具体的使用方法,感兴趣的朋友可以参考下
    2013-04-04
  • 三分钟带你快速学会微信小程序的条件渲染

    三分钟带你快速学会微信小程序的条件渲染

    所谓的条件渲染就是判断是否需要把代码渲染到展示页面上,下面这篇文章主要给大家介绍了关于微信小程序条件渲染的相关资料,文中通过实例代码和图文介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • chrome浏览器不支持onmouseleave事件的解决技巧

    chrome浏览器不支持onmouseleave事件的解决技巧

    发现给div加的 onmouseleave事件在chrome 中不起效果,下面与大家分享下具体的解决方法,不会的朋友可以了解下哈,希望对大家有所帮助
    2013-05-05
  • 父元素与子iframe相互获取变量和元素对象的具体实现

    父元素与子iframe相互获取变量和元素对象的具体实现

    父元素与子iframe相互获取变量和元素对象的方法有很多,本文提供了一些不错的示例另收集网上的一些,可以参考下
    2013-10-10
  • JS使用Promise时常见的5个错误总结

    JS使用Promise时常见的5个错误总结

    Promise 提供了一种优雅的方法来处理 JS 中的异步操作。这也是避免“回调地狱”的解决方案。然而,并没有多少开发人员了解其中的内容。因此,许多人在实践中往往会犯错误。在本文中,介绍一下使用 promise 时的五个常见错误,希望大家能够避免
    2022-11-11
  • 实现点击列表弹出列表索引的两种方式

    实现点击列表弹出列表索引的两种方式

    使用利用事件冒泡委托给列表的父节点去处理的方式第二种方式就是使用闭包了,感兴趣的你可以参考下本文,或许对你学习js有所帮助
    2013-03-03
  • Bootstrap实现下拉菜单效果

    Bootstrap实现下拉菜单效果

    这篇文章主要为大家详细介绍了Bootstrap实现下拉菜单效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-04-04

最新评论