jquery横竖屏切换代码（切换横屏竖屏）

今天给各位分享jquery横竖屏切换代码的知识，其中也会对切换横屏竖屏进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、基于jQuery的判断iPad，iPhone，Android是横屏还是竖屏的代码
• 2、jquery怎么判断是手机端横屏
• 3、JQuery mobile 怎么设置默认横屏
• 4、app开发怎样实现横竖屏的切换，切屏代码
• 5、JQuery切换样式

基于jQuery的判断iPad，iPhone，Android是横屏还是竖屏的代码

基于jQuery的判断iPad，iPhone，Android是横屏还是竖屏主要是使用window.orientation这个属性来判断：

屏幕方向对应的window.orientation值：

ipad： 90 或 -90 横屏

ipad： 0 或180 竖屏

Andriod：0 或180 横屏

Andriod： 90 或 -90 竖屏

如下代码：

function orient() {

if (window.orientation == 90 || window.orientation == -90) {

//ipad、iphone竖屏；Andriod横屏

$("body").attr("class", "landscape");

orientation = 'landscape';

return false;

}else if (window.orientation == 0 || window.orientation == 180) {

//ipad、iphone横屏；Andriod竖屏

$("body").attr("class", "portrait");

orientation = 'portrait';

return false;

}

}

//页面加载时调用

$(function(){

orient();

});

//用户变化屏幕方向时调用

$(window).bind( 'orientationchange', function(e){

orient();

});

jquery怎么判断是手机端横屏

//判断手机横竖屏状态：  

    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {  

            if (window.orientation === 180 || window.orientation === 0) {   

               //alert('竖屏状态！');  

            }   

            if (window.orientation === 90 || window.orientation === -90 ){   

                //alert('横屏状态！');  

            }    

        }, false);   

//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。

JQuery mobile 怎么设置默认横屏

jquerymobile没有这个功能，他只是一个前端展示框架。且无操作手机其他权限的功能。

使用window.orientation可以判断是否横竖屏

原生JS实现切换：

script

//屏幕方向标识，0横屏，其他值竖屏

var orientation=0;

//转屏事件，内部功能可以自定义

function screenOrientationEvent(){

if(orientation == 0)document.getElementById("change").value="竖";

else document.getElementById("change").value="横";

}

var innerWidthTmp = window.innerWidth;

//横竖屏事件监听方法

function screenOrientationListener(){

try{

var iw = window.innerWidth;

//屏幕方向改变处理

if(iw != innerWidthTmp){

if(iwwindow.innerHeight)orientation = 90;

else orientation = 0;

//调用转屏事件

screenOrientationEvent();

innerWidthTmp = iw;

}

} catch(e){alert(e);};

//间隔固定事件检查是否转屏，默认500毫秒

setTimeout("screenOrientationListener()",500);

}

//启动横竖屏事件监听

screenOrientationListener();

/script

body onload="screenOrientationEvent()"

input id="change" type="text" value=""/

/body

app开发怎样实现横竖屏的切换，切屏代码

使用jQuery Mobile开发Web App-页面切换动画 android

jQuery Mobile包含一组基于CSS3的过渡动画（又称转场效果），可以应用在任何页面或page组件切换。jQuery Mobile默认对页面切换和返回按钮设置了滑动（slide）效果

要设定一个特定过渡效果，只需要在链接上添加一个data-transition属性，可以使用以下属性值：a data-transition="pop"I'll pop/a

jQuery Mobile提供了6种切换动画：slide(滑动)、slideup(向上滑动)、slidedown(向下滑动)、pop(抛出)、fade(淡入淡出)和flip(3D翻转)。动画效果见这里。

注意：flip效果在大多数android浏览器上不能被正确渲染，因为缺少对3d css transform的支持。不幸的是android并没有忽略flip效果，而是使用水平翻转来替代。所以建议在android完美支持之前谨慎使用flip效果。

此外，你可以使用data-direction=”reverse”来设定反向的过渡效果，比如对slide效果（从右往左）使用data-direction=”reverse”则会变成从左往右，对pop效果（从小到大抛出）使用data-direction=”reverse”则会变成从大到小消失。

JQuery切换样式

这个用jQuery实现一般是添加一个类和删除一个类。

首先要有一个写好的class样式类。通过下面这个代码实现：

var obj2 = $("div"); // 改变样式的对象

obj2.addClass("className"); // 添加样式，className为已经存在一个class名字

obj2.removeClass("className"); // 删除样式

切换样式

JQuery中有一个方法toggle()，JQuery代码如下：

1 toggleBtn.toggle(function(){

2 //元素显示 代码③

3 }, function(){

4 //元素隐藏 代码④

5 })

toggle()方法此处的作用是交替执行代码③和代码④两个函数，如果元素原来是显示的，则隐藏它：如果元素原来是隐藏的，则显示它。此时，toggle()方法主要是控制行为上的重复切换。

另外JQuery还提供了一个toggleClass()方法控制样式上的重复切换。如果类名存在则删除它，如果类名不存在则添加它。例如对p元素进行toggleClass()方法操作。

1 $("p").toggleClass("another"); //重复切换类名“another”

当不断单击“切换样式”按钮时，p元素的class的值就会在“myClass”和“myClass another”之间重复切换。

jquery横竖屏切换代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于切换横屏竖屏、jquery横竖屏切换代码的信息别忘了在本站进行查找喔。