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

相关文章

  • 微信小程序页面间传值与页面取值操作实例分析

    微信小程序页面间传值与页面取值操作实例分析

    这篇文章主要介绍了微信小程序页面间传值与页面取值操作,结合实例形式分析了微信小程序页面间传值及页面取值操作相关实现技巧与操作注意事项,需要的朋友可以参考下
    2019-04-04
  • 使用ethers.js部署Solidity智能合约的方法

    使用ethers.js部署Solidity智能合约的方法

    Ethers.js则是一个轻量级的web3.js替代品,在本文中,我们将学习使用ethers.js部署Solidity智能合约的方法,感兴趣的朋友一起看看吧
    2021-10-10
  • JavaScript算法实例之求二叉树从根到叶的所有路径和

    JavaScript算法实例之求二叉树从根到叶的所有路径和

    如果你希望求某一特定路径(例如从根到叶子)上数字的和,那么问题就转变为了“求二叉树从根到叶的所有路径和”,所以本文给大家介绍了如何使用JavaScript求二叉树从根到叶的所有路径和,需要的朋友可以参考下
    2023-10-10
  • JS的反射问题

    JS的反射问题

    两个等号直接比较值,但是类型不能相互转换的时候报错
    2010-04-04
  • JS正则表达式大全(整理详细且实用)

    JS正则表达式大全(整理详细且实用)

    JS正则表达式大全(整理详细且实用)。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • 在B/S开发中经常用到的JavaScript技术

    在B/S开发中经常用到的JavaScript技术

    javascript运用中,经常用到的代码,建议每段代码都要看下,注意本文有三页,仔细看玩,逐个研究透彻,那么网页中常见的问题,你也就熟悉掌握了
    2008-05-05
  • js parentElement和offsetParent之间的区别

    js parentElement和offsetParent之间的区别

    这里主要说的是 offsetParent 属性,这个属性在 MSDN 的文档中也没有解释清楚,这就让人更难理解这个属性。 这几天在网上找了些资料看看,再加上自己的一些测试,对此属性有了那么一点的了解,在这里总结一下。
    2010-03-03
  • JavaScript实现定时任务队列的示例代码

    JavaScript实现定时任务队列的示例代码

    这篇文章主要为大家详细介绍了如何使用JavaScript实现一个基于一定时间间隔连续执行任务队列的功能,文中的示例代码讲解详细,需要的小伙伴可以参考下
    2023-11-11
  • 微信小程序组件生命周期的踩坑记录

    微信小程序组件生命周期的踩坑记录

    这篇文章主要给大家介绍了关于微信小程序组件生命周期的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 原生js实现贪食蛇小游戏的思路详解

    原生js实现贪食蛇小游戏的思路详解

    这篇文章主要介绍了原生js实现贪食蛇小游戏的思路详解,,文中给大家写出了注释,帮助大家理解代码,需要的朋友可以参考下
    2019-11-11

最新评论