JQuery移动页面开发之屏幕方向改变与滚屏的实现

网络编程 2024/11/15 佚名

3 2 1

方向改变事件(orientationchange)
当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时，你的回调函数可以加入第二个参数，作用为描述设备横或纵向的属性，"portrait"或;landscape"。这些值也会作为class值加入到html的元素中，使你可以通过css中的选择器改变他们的样式。注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。

手持设备方向改变时执行

 $(window).bind( 'orientationchange', function(e){
 var height=document.body.clientHeight - 195;
 $("#content").css("min-height",height);
 $("#thumb").css("margin",height/4.2 + "px auto");
 });

以上示例是本人用于在手持设备改变方向时填充整个页面，避免出现空白，可以根据自己的需求扩展。

$(function(){
 $('a').click(function(){
 $(window).trigger('orientationchange' );
 });
});

在智能手机和平板设备上，只有一个名称为orientationchange 的方向事件。该事件在设备被垂直或水平旋转时触发。要确定设备按哪个方向旋转，您可以访问方向属性，它提供一个只读值portrait 或 landscape。

绑定到 orientationchange 事件要求您定位 body 元素，然后使用 bind 方法来绑定事件。将orientationchange 事件绑定到body，但是要等待元素在文档就绪后，再绑定事件，这也很重要。否则，您会获得不一致的结果，因为body 元素可能在绑定时不可用。您也可以进一步增强该代码，当文档就绪时触发orientationchange 事件。

当文档就绪时触发orientationchange 事件

<!DOCTYPE HTML>
<html>
<head>
<title>Understanding the jQuery Mobile API</title>
<link rel="stylesheet" href="jquery.mobile.css" />
<script src="/UploadFiles/2021-04-02/jquery.js">

当文档就绪时触发事件，这使您可以确定 Web 页面初始加载时的方向。当您需要 在用设备的当前方向显示内容时，这特别有用。您也可以通过CSS 访问方向值，因为它们被添加到 Web 页面中的 HTML 元素。这些强大的特性使您可以 设备的方向修改内容布局。
滚屏事件(scrollstart、scrollstop)

scrollstart：当屏幕滚动开始的时候触发。苹果的设备会在滚屏时冻结DOM的操作，当滚屏结束时按队列执行这些dom操作，我们现在正在研究方法让苹果的设备在滚屏开始前执行dom操作。


$(document).ready(function(){

 $('body').bind('scrollstart', function(event) {
 // Add scroll start code here
 });

});




scrollstop：滚屏结束时触发。


$(document).ready(function(){

 $('body').bind('scrollstop', function(event) {
 // Add scroll stop code here
 });

});






<!DOCTYPE html>
<html>
 <head>
  <title>Ajax测试</title>
  <meta charset="gbk">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.2.0.min.css"/>
  <link rel="stylesheet" href="jquery-mobile/jquery.mobile.structure-1.2.0.min.css"/>
  <script src="/UploadFiles/2021-04-02/jquery-1.8.2.min.js">