JQuery移动页面开发之屏幕方向改变与滚屏的实现_jquery
方向改变事件(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 id="Header">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>

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

7月23日消息,博主数码闲聊站爆料称,小米15Pro电池容量增大至6000mAh,支持90W有线闪充,这将是小米数字系列电池最大的Pro机型。此前数码闲聊站透露,小米15Pro的电池拥有超高能量密度,硅含量远高于竞品。硅基电池在2023年大规模试水后,第二代硅负极电池被确定为行业未来发展方向,今年将迎来直接竞争的高峰。1.硅的理论克容量可达4200mAh/g,是石墨克容量的10倍以上(石墨的理论克容量372mAh/g)。对于负极而言,当锂离子嵌入量达到最大时的容量为理论克容量,这意味着相同重量下

jQuery引用方法详解:快速上手指南jQuery是一个流行的JavaScript库,被广泛用于网站开发中,它简化了JavaScript编程,并为开发者提供了丰富的功能和特性。本文将详细介绍jQuery的引用方法,并提供具体的代码示例,帮助读者快速上手。引入jQuery首先,我们需要在HTML文件中引入jQuery库。可以通过CDN链接的方式引入,也可以下载

jQuery中如何使用PUT请求方式?在jQuery中,发送PUT请求的方法与发送其他类型的请求类似,但需要注意一些细节和参数设置。PUT请求通常用于更新资源,例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先,确保引入了jQuery库文件,然后可以通过以下方式发送PUT请求:$.ajax({u

jQuery如何移除元素的height属性?在前端开发中,经常会遇到需要操作元素的高度属性的需求。有时候,我们可能需要动态改变元素的高度,而有时候又需要移除元素的高度属性。本文将介绍如何使用jQuery来移除元素的高度属性,并提供具体的代码示例。在使用jQuery操作高度属性之前,我们首先需要了解CSS中的height属性。height属性用于设置元素的高度

《三角洲行动》于今日(3月7日)将开启一场名为“代号:ZERO”的大规模PC测试。而在上周末,这款游戏在上海举办了一次线下快闪体验活动,17173也有幸受邀参与其中。此次测试距离上一次仅仅相隔四个多月,这不禁让我们好奇,在这么短的时间内,《三角洲行动》将会带来哪些新的亮点与惊喜?四个多月前,我已先行在线下品鉴会和首测版本中体验了《三角洲行动》。当时,游戏仅开放了“危险行动”这一模式。然而,《三角洲行动》在当时的表现已然令人瞩目。在各大厂商纷纷涌向手游市场的背景下,如此一款与国际水准相媲美的FPS

标题:jQuery小技巧:快速修改页面所有a标签的文本在网页开发中,我们经常需要对页面中的元素进行修改和操作。在使用jQuery时,有时候需要一次性修改页面中所有a标签的文本内容,这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本,同时给出具体的代码示例。首先,我们需要引入jQuery库文件,确保在页面中引入了以下代码:<

日前,荣耀手机召开了新品发布会,正式推出了荣耀Magic6RSR保时捷设计。3月22日,CNMO了解到,荣耀Magic6RSR保时捷设计正式开售,仅提供24GB+1TB一种版本,售价9999元。荣耀Magic6RSR采用了保时捷设计的外观,灵感源自保时捷超级跑车的经典元素。背部线条设计灵感来自保时捷飞线式设计,相机模组则采用标志性的六边形设计,使产品拥有鲜明的立体感和动感。此外,产品提供了保时捷原厂大师调色的玛瑙灰和冰莓粉两款配色,更加彰显其独特的设计美感。在屏幕技术上,荣耀Magic6RSR保

标题:使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库,被广泛用于处理DOM操作。在网页开发中,经常会遇到需要修改页面上链接标签(a标签)的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标,并提供具体的代码示例。首先,我们需要在页面中引入jQuery库。在HTML文件中添加以下代码:
