html5移动端:手机旋转(js)(jquery)

原创 2016年08月31日 15:29:19

一、html5移动端:手机旋转(js)

<!doctype html>

<html>
  <head>
<title>Mobile Cookbook</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
padding: none;
margin: none;
}
</style>
  </head>
  <body>
    <div id="a">
    旋转手机
    </div>
<script>
function orientationChange() {
   switch(window.orientation) {
     case 0: 
           alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
           break;
     case -90: 
           alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
           break;
     case 90:   
           alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
           break;
     case 180:   
         alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
         break;
   }

   }


  window.addEventListener('orientationchange', orientationChange);

</script>
</body>
</html>

总结:

js : 监听手机旋转事件:orientationchange;切记:js 监听手机旋转属性用:window.orientation; 之前用event.orientation返回null;




一、html5移动端:手机旋转(jquery)

<!doctype html>
<html>
  <head>
<title>Mobile Cookbook</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
padding: none;
margin: none;
}
</style>
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
  </head>
  <body>
    <div id="a">手机旋转  jquery
    </div>    
<script>
      $(window).bind('orientationchange',function(event){
        updateOrientation(event.orientation);
      })
function updateOrientation(orientation) {
        $("#a").html("<p>"+orientation.toUpperCase()+"</p>");
}
</script>
</body>
</html>



总结:

jquery : 监听手机旋转事件:orientationchange;切记:jquery监听手机旋转属性用:用event.orientation;


如果是网页版:改造:

<script type="text/javascript">
var evt = "onorientationchange" in window ? "orientationchange" "resize";
      
window.addEventListener(evt, function() {
    alert("屏幕旋转");
}, false);
</script>




 







 
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

html5横、竖屏状态 以及禁止横屏

代码: window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengsh...

css3实现卡片翻转

真的是好记性不如乱笔头,以前看过了css3实现卡片翻转,觉得简单,也就没做笔记,今天在写了,一头蒙啊。。 需要用到的css3:属性: 1、perspective:800px;景深:一般设给舞台, ...
  • wstpa
  • wstpa
  • 2015-09-13 20:34
  • 1320

HTML5 - 用CSS3动画制作场景切换效果(移动,旋转,淡入淡出等)

两个场景(即两个div视图)切换的时候,如果想添加个过渡动画,除了可以使用js来实现,还可以通过CSS3的animation属性来实现。 (注意:Internet Explorer 9 以及更早的...

小图看大图

demo *{ margin:0; padding:0; ...

移动端页面的多点触控——旋转

今早在segmentfault上看到一篇文章《超小Web手势库AlloyFinger原理》,最后提到一个多点触控的介绍,因为没写过所以觉得应该蛮有意思,以下是我写完旋转demo后,对问题从分析到解决的...

移动端单指拖 双值旋转缩放(修改版)

demo 修改内容:修改了缩放或者扩大后元素溢出边框的BUG,获取了缩放或者扩大的区间值进行计算,具体差别可以看上一篇博客对比一下代码就知道了。 222 ...

html5如何获取手机陀螺仪角度信息

html5事件中,deviceorientation事件,此事件是检测设备方向变化时的事件。其常用属性为alpha(x)、beta(y)、gamma(z)。 默认将手机垂直,且正面(90度)冲着自己...
  • tdjqqq
  • tdjqqq
  • 2016-05-18 15:13
  • 4523

html5屏幕旋转事件

在项目开发中发现,屏幕旋转旋转后html界面出现了不同的显示效果,如果在屏幕旋转后重新加载一次界面的话就会显示的相对来说能接受一点,为此如果能监听到屏幕发生了旋转后进行相关的回调处理,则问题会得到解决...
  • ABC__D
  • ABC__D
  • 2016-04-18 13:25
  • 4140

html5屏幕旋转事件,html5如何实现屏幕旋转

html5屏幕旋转事件 onorientationchange 很多用html5开发移动应用的童鞋不知道怎么实现监听屏幕旋转,下面为大家介绍html5如何实现屏幕旋转 添加屏幕旋转事件侦听...

移动屏幕旋转解决方法

禁止用户屏幕旋转。 这点可以肯定的说是做不到的,之前因为有项目需要禁止屏幕旋转,所以网上查阅了大量的资料,发现根本没有解决办法,在移动版webkit中根本做不到。苹果api也说明了,我们为了让用...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)