关闭

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

1692人阅读 评论(0) 收藏 举报

一、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>




 







 
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:35182次
    • 积分:871
    • 等级:
    • 排名:千里之外
    • 原创:52篇
    • 转载:7篇
    • 译文:2篇
    • 评论:0条
    文章分类