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


Posted in Javascript onDecember 03, 2015

方向改变事件(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="jquery.js"></script>
<script type="text/java script">
$(document).ready(function(){
 $(".tap-hold-test").bind("taphold", function(event) {
 $(this).html("Tapped and held");
 });
});
</script>
<script src="jquery.mobile.js"></script>
</head>
<body>
<div data-role="page" id="my-page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="my-list">
<li class="tap-hold-test">Tap and hold test</li>
</ul>
</div>
</div>
</body>
</html>

$(document).ready(function(){
 $('body').bind('orientationchange', function(event) {
 alert('orientationchange: '+ event.orientation);
 });
});

当文档就绪时触发事件,这使您可以确定 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="jquery-mobile/jquery-1.8.2.min.js"></script>
  <script src="jquery-mobile/jquery.mobile-1.2.0.min.js"></script>
 </head>
 <body>
  <div data-role="page" data-theme="b">
  <div data-role="header"></div>
  <div data-role="content">
   <script>
 //scrollstart事件
 function scrollstartFunc(evt) {
  try
  {
  var target = $(evt.target);
  while (target.attr("id") == undefined) {
  target = target.parent();
  }
  //获取触点目标id属性值
  var targetId = target.attr("id");
  alert("targetId: " + targetId);
  }
  catch (e) {
  alert('myscrollfunc:' + e.message);
  }
 }
 function myinit() {
  //绑定上下滑动事件
  $("#myul").bind('scrollstart', function () { scrollstartFunc(event); });
 }
 window.onload = myinit;
 </script>
 <!-- listview测试 -->
 <ul id="myul" data-role="listview" data-inset="true">
 <li data-role="list-divider">信息列表</li>
 <li id="li1" data-role="fieldcontain">信息1</li>
 <li id="li2" data-role="fieldcontain">信息2</li>
 <li id="li3" data-role="fieldcontain">信息3</li>
 <li id="li4" data-role="fieldcontain">信息4</li>
 <li id="li5" data-role="fieldcontain">信息5</li>
 <li id="li6" data-role="fieldcontain">信息6</li>
 <li id="li7" data-role="fieldcontain">信息7</li>
 <li id="li8" data-role="fieldcontain">信息8</li>
 <li id="li9" data-role="fieldcontain">信息9</li>
 <li id="li10" data-role="fieldcontain">信息10</li>
 </ul>
  </div>
 </body>
</html>
Javascript 相关文章推荐
jQuery最佳实践完整篇
Aug 20 Javascript
css值转换成数值请抛弃parseInt
Oct 24 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 Javascript
微信小程序接入vant Weapp组件的详细步骤
Oct 28 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 #Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 #Javascript
详解JavaScript对象和数组
Dec 03 #Javascript
java必学必会之static关键字
Dec 03 #Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 #Javascript
继续学习javascript闭包
Dec 03 #Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
Dec 03 #Javascript
You might like
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
使用PHP实现密保卡功能实现代码&amp;lt;打包下载直接运行&amp;gt;
2011/10/09 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
PDO::query讲解
2019/01/29 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
JS解密入门之凭直觉解
2008/06/25 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
详解 Python 与文件对象共事的实例
2017/09/11 Python
python简单实现操作Mysql数据库
2018/01/29 Python
python画折线图的程序
2018/07/26 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
Python远程方法调用实现过程解析
2020/07/28 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
C#软件工程师英语面试题
2015/06/07 面试题
日语专业推荐信
2013/11/12 职场文书
开水果连锁店创业计划书
2013/12/29 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
一个都不能少观后感
2015/06/04 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
配置nginx负载均衡
2022/05/06 Servers