orientationchange实现手机横竖屏事件

最新推荐文章于 2024-05-16 16:54:11 发布

iteye_7560

最新推荐文章于 2024-05-16 16:54:11 发布

阅读量1.4k

点赞数

分类专栏： js实例文章标签：横竖屏切换、orientationchange、js、orientation

本文链接：https://blog.csdn.net/iteye_7560/article/details/82572935

版权

js实例专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这个主要是实现手机页面相册横屏时能单独作为幻灯片播放，前提一定要让手机的横屏功能开启才可以。主要是通过iframe调用不同的引用页面实现，下面附上具体代码，可以尝试实现。

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>横竖屏</title>
<script src="../script/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
var hei=$(window).height();
$("iframe").height(hei);

function orient() {

//判断是否为竖屏

if (window.orientation == 0 || window.orientation == 180) {
    //alert("竖屏");
  $("body").attr("class", "portrait");

  orientation ="portrait";

  $("#ifm").attr("src","Carousel.html");
  return false;

}

//判断是否为横屏

   else if (window.orientation == 90 || window.orientation == -90) {
     //alert("横屏");
  $("body").attr("class", "landscape");

  orientation = "landscape";

  $("#ifm").attr("src","Carousel1.html");

  return false;
}

}
    //orientationchange手机横竖屏出发事件
$(window).bind('orientationchange', function(e){

   orient();

});
})

</script>

</head>

iteye_7560

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
orientationchange实现手机横竖屏事件

这个主要是实现手机页面相册横屏时能单独作为幻灯片播放，前提一定要让手机的横屏功能开启才可以。主要是通过iframe调用不同的引用页面实现，下面附上具体代码，可以尝试实现。 &lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="gb2312"&gt;&lt;meta name="viewport" content=&q
复制链接

扫一扫

专栏目录