JQuery行動頁面開發之螢幕方向改變與滾屏的實作

首頁

web前端

js教程

JQuery行動頁面開發之螢幕方向改變與滾屏的實作_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:27 PM

jquery 移動

方向改變事件(orientationchange)
當設備的方向變化（設備橫向持或縱向持）此事件被觸發。綁定此事件時，你的回呼函數可以加入第二個參數，作用為描述設備橫或縱向的屬性，"portrait"或;landscape"。這些值也會作為class值加入html的元素中，使你可以透過css中的選擇器改變他們的樣式。

手持裝置方向改變時執行

 $(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>

登入後複製

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7541

CakePHP 教程

1381

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

6000 毫安矽負極電池！小米 15Pro 升級再曝料 Jul 24, 2024 pm 12:45 PM

7月23日消息，部落客數位閒聊站爆料稱，小米15Pro電池容量增大至6000mAh，支援90W有線閃充，這將是小米數位系列電池最大的Pro機型。先前數位閒聊站透露，小米15Pro的電池擁有超高能量密度，矽含量遠高於競品。矽基電池在2023年大規模試水後，第二代矽負極電池被認定為產業未來發展方向，今年將迎來直接競爭的高峰。 1.矽的理論克容量可達4200mAh/g，是石墨克容量的10倍以上（石墨的理論克容量372mAh/g）。對於負極而言，當鋰離子嵌入量達到最大時的容量為理論克容量，這意味著在相同重量下

jQuery引用方法詳解：快速上手指南 Feb 27, 2024 pm 06:45 PM

jQuery引用方法詳解：快速上手指南jQuery是一個受歡迎的JavaScript庫，被廣泛用於網站開發中，它簡化了JavaScript編程，並為開發者提供了豐富的功能和特性。本文將詳細介紹jQuery的引用方法，並提供具體的程式碼範例，幫助讀者快速上手。引入jQuery首先，我們需要在HTML檔案中引入jQuery函式庫。可以透過CDN連結的方式引入，也可以下載

jQuery中如何使用PUT請求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT請求方式？在jQuery中，發送PUT請求的方法與發送其他類型的請求類似，但需要注意一些細節和參數設定。 PUT請求通常用於更新資源，例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先，確保引入了jQuery庫文件，然後可以透過以下方式發送PUT請求：$.ajax({u

jQuery如何移除元素的height屬性？ Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height屬性？在前端開發中，經常會遇到需要操作元素的高度屬性的需求。有時候，我們可能需要動態改變元素的高度，而有時候又需要移除元素的高度屬性。本文將介紹如何使用jQuery來移除元素的高度屬性，並提供具體的程式碼範例。在使用jQuery操作高度屬性之前，我們首先需要了解CSS中的height屬性。 height屬性用於設定元素的高度

國產FPS新王炸！《三角洲行動》大戰場超乎預期 Mar 07, 2024 am 09:37 AM

《三角洲行動》將在今日（3月7日）開啟一場名為「代號：ZERO」的大規模PC測試。而在上週末，這款遊戲在上海舉辦了一次線下快閃體驗活動，17173也有幸受邀參與其中。這次測試距離上一次僅相隔四個多月，不禁讓我們好奇，在這麼短的時間內，《三角洲行動》將會帶來哪些新的亮點與驚喜？四個多月前，我已先行在線下品鑑會和首測版本中體驗了《三角洲行動》。當時，遊戲僅開放了「危險行動」這個模式。然而，《三角洲行動》在當時的表現已然令人矚目。在各大廠商紛紛湧向手遊市場的背景下，如此一款與國際水準相媲美的FPS

jQuery小技巧：快速修改頁面所有a標籤的文本 Feb 28, 2024 pm 09:06 PM

標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：&lt

使用jQuery修改所有a標籤的文字內容 Feb 28, 2024 pm 05:42 PM

標題：使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫，被廣泛用於處理DOM操作。在網頁開發中，經常會遇到需要修改頁面上連結標籤（a標籤）的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標，並提供具體的程式碼範例。首先，我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼：

榮耀 Magic6 RSR 保時捷設計正式開賣 1TB 售 9999 元 Mar 22, 2024 pm 03:03 PM

日前，榮耀手機舉辦了新品發表會，正式推出了榮耀Magic6RSR保時捷設計。 3月22日，CNMO了解到，榮耀Magic6RSR保時捷設計正式開售，僅提供24GB+1TB一種版本，售價9,999元。榮耀Magic6RSR採用了保時捷設計的外觀，靈感源自保時捷超級跑車的經典元素。背部線條設計靈感來自保時捷飛線式設計，相機模組則採用標誌性的六角形設計，讓產品擁有鮮明的立體感和動感。此外，產品提供了保時捷原廠大師調色的瑪瑙灰和冰莓粉兩款配色，更加彰顯其獨特的設計美感。在螢幕技術上，榮耀Magic6RSR保

See all articles

JQuery行動頁面開發之螢幕方向改變與滾屏的實作_jquery

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題