html5 touch事件實現觸屏頁面上下滑動(一)

最近做的做那個app的專案由於用overflow：hidden導致了很多問題，於是決定研究下html5的touch事件。想找個全面點的帖子很難，雖然好多關於html5 touch的文章但大多都是介紹touch事件或者很簡短的小demo。
比較全面的上下滑動的小demo，程式碼比較簡單。

下面是完整程式碼，我把幾個重要的地方做了紅色標記

XML/HTML Code複製內容到剪貼簿

<!doctype html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"

content="width=device-width,initial-scale=1 user-scalable=0"/>
<title>2014-4-29</title>
<style>
* {margin: 0; padding: 0;}
#outer{ width:90%; height: 490px; background: #000; margin: auto; overflow: hidden;}
#inner{width:80%; height: 2000px; background: #f67d42; margin: auto; position:relative; top:0; }
</style>
<scriptsrc='jquery-1.9.1.min.js'></script>
</head>
<body>
<divid="spText"></div>
<divid="outer">
<divid="inner">
123 123 gag af 123 123 123 123 

123 123 123 123 123 123 123 yryyr ryry 123 123 123 123 123 sdff fef 123 hr hrh 5y 123 er ert 123 rgdgdg 123 123 123 123 123 123 gfgfgfgfgfgf sdsdsdsdsdsd sf 123 123 123 123 123 123 123 123 gdggdgdg 123 drgdrgd 123 123 123 yuyuyuyuyuy hjkhjkhkhkhjkhkh kjkjk 123 123 gag af 123 123 123 123 123 123 123 123 123 123 123 yryyr ryry 123 123 123 123 123 sdff fef 123 hr hrh 5y 123 er ert 123 rgdgdg 123 123 123 123 123 123 gfgfgfgfgfgf sdsdsdsdsdsd sf 123 123 123 123 123 123 123 123 gdggdgdg 123 drgdrgd 123 123 123 yuyuyuyuyuy hjkhjkhkhkhjkhkh kjkjk
</div>
</div>
<script>
var startX,//觸控時的座標
startY,
x, //滑動的距離
y,
aboveY=0; //設一個全域性變數記錄上一次內部塊滑動的位置
var inner=document.getElementById("inner");
function touchSatrt(e){//觸控
e.preventDefault();
var touch=e.touches[0];
startY = touch.pageY; //剛觸控時的座標
}
function touchMove(e){//滑動
e.preventDefault();
var touch = e.touches[0];
y = touch.pageY - startY;//滑動的距離
//inner.style.webkitTransform = 'translate(' + 0+ 'px, ' + y + 'px)'; //也可以用css3的方式
inner.style.top=aboveY+y+"px"; //這一句中的aboveY是inner上次滑動後的位置
}
function touchEnd(e){//手指離開螢幕
e.preventDefault();
aboveY=parseInt(inner.style.top);//touch結束後記錄內部滑塊滑動的位置在全域性變數中體現一定要用parseInt()將其轉化為整數字;
}//
document.getElementById("outer").addEventListener('touchstart', touchSatrt,false);
document.getElementById("outer").addEventListener('touchmove', touchMove,false);
document.getElementById("outer").addEventListener('touchend', touchEnd,false);
</script>
</body>
相關推薦

html5 touch事件實現觸屏頁面上下滑動(一)

最近做的做那個app的專案由於用overflow：hidden導致了很多問題，於是決定研究下html5的touch事件。想找個全面點的帖子很難，雖然好多關於html5 touch的文章但大多都是介紹touch事件或者很簡短的小demo。比較全面的上下滑動的小dem

iphone、ipod Touch、ipad觸屏時的js事件

1、Touch事件簡介 pc上的web頁面鼠標會產生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件，但是在移動終端如 iphone、ipod Touch、ipad上的web頁面觸屏時會產生ontouchst

html5移動裝置瀏覽器觸屏事件相容處理

自打諾基亞被蘋果乾趴下，Google開源Android系統，智慧裝置數量以及種類以不可阻擋的勢頭髮展，蘋果封閉的生態系統，Android開源開放的生態導致，殊途同歸地給了我等屌絲開發者相同苦逼的命運，相容命題。跨平臺適配是個痛苦的工作，這裡只談談近期工作學習相關的部分，蘋果裝置和安卓裝置瀏覽

通過vw、vh單位實現全屏頁面的簡單自適應

剛剛入行前端開發一年，經驗欠缺，在新公司獨立承擔一個生產管理系統的前端開發工作。該系統操作頁面均為全屏，頁面固定但使用機器有所不同，且使用者在使用時不保證能記得按F11（手動捂臉），因此希望適應全屏和不同解析度以達成最好的顯示效果。初版使用固定式佈局，完成後現場測試效果一般，後改為使用

JS實現全屏頁面切換

var ismoving=false;//使頁面滾動時停止監聽滾輪事件 var pageH=document.documentElement.clientHeight;//獲得當前視窗高度 var allheight=document.documentElem

Axure學習筆記整理4-實現APP頁面上下滑動（垂直滾動條）

這裡有個比較簡單的互動方法用來實現頁面上下滑動的效果： 1、拖拽一個動態面板設定高度667，寬度375，雙擊進入state1，拖拽一些部件組成頁面，要超過動態面板本身的667尺寸；如下面這個state1的圖片： 2、在state1中選擇除了頂部狀態列的剩餘部分，剩餘部分選擇’轉換為動態面板

Axure學習筆記整理4-實現APP頁面上下滑動及彈回效果

相對於其他互動效果，Axure製作app頁面的上下滑動效果還是比較簡單的。為了使效果顯著一點，先做一款簡單的原型如下。第一步，將下面框起來的部分要做滑動的內容選好，點選滑鼠右鍵‘轉化為動態面板’，並把這個動態面板命名為‘介面內容’；第二步，選中‘介面內容’動態面板，選擇

自定義ViewGroup實現多個單頁面上下滑動效果

閱讀過自定義ViewGroup實現仿淘寶的商品詳情頁的童鞋，應該都瞭解了ViewGroup中onMeasure、onLayout、onTouchEvent等相關方法的使用。在介紹仿淘寶商品詳情頁時，我們提到過現在網上很多實現方法是使用ScrollView巢狀兩個

uiscrollview的touch事件以及上面子檢視touch事件實現原理

我們知道當多個檢視進行疊加的時候，touch事件是作用到最上面的檢視上，但是如果父檢視是UIScrollView，如果預設，可能touch子檢視會造成UIScrollView的滾動。 UIScrollView滾動的原因，可以看UIScrollView 原理。我在這裡

Axure8.0 頁面上下滑動效果實現

1.開啟Axure 8.0，在網上找一個iPhone外殼的圖片，然後新增大小和手機螢幕相等的動態面板，命名為“螢幕” 2.然後雙擊State1，新增一個矩形，寬度=螢幕寬度，長度任意。然後選中矩形，點選滑鼠右鍵，選擇轉換為動態面板，命名為“內容

005-Vuforia實現觸屏原地旋轉物體的功能

1、實現觸屏原地旋轉物體的功能，建立一個Image 設為透明的程式碼繫結到Image上，並指定旋轉的物件即可。 using UnityEngine; using System.Collection

手機影音第十天，控制屏幕上下滑動改變音量變化，監聽物理鍵改變音量

滑動屏幕改變音量大小物理鍵的增大、減小改變音量與seekbar的進度條代碼已托管至碼雲上，有興趣的小夥伴可以下載看看，IDE是Android studio 2.3.2 https://git.oschina.net/joy_yuan/MobilePlayer 常

php讀寫文件實現刷新頁面數字加一

一個 images 處理 exists 寫入 rewind pan als fgetc $filename = ‘./count.txt‘; //第一步:創建文件並初始化為0; if(!file_exists($filename)){ //打開方式"w",

微信手機端禁止頁面上下滑動

rip 解決內容監聽 OS 有時解決辦法 lis tde 做微信手機端開發，有時候頁面內容一屏就能顯示下，這樣的情況下就不需要頁面能上下滑動，解決辦法記錄如下：安卓手機：只需添加樣式即可： body, html { 　　position: fixed; 　　top

ViewFlipper自用左右滑動切屏、上下滑動調整亮度’

1、xml佈局檔案為ViewFlipper新增多個檢視 <ViewFlipper android:id="@+id/screen_view_flipper" android:layout_width="match_parent" android:layout_hei

Echarts + Web實現大屏展示效果（一）

一、效果展示二、資源下載 1、圖片資源下載點選這裡 2、js+css 檔案資源下載點選這裡三、Demo實現 1、文件結構如下圖所示： 2、Demo.html 程式碼 <!DOCTYPE html> <html l

TextView 內容過多,顯示不全時,實現帶滾動條,上下滑動

當textview顯示一大段文字時，不能再指定高度顯示時，需要上下滑動來檢視剩餘文字。在xml檔案中 <TextView android:id="@+id/tv_title" android:layout_width="match_p

關於RecyclerView實現瀑布流，上下滑動時item之間互換位置的問題

最近專案需求，需要RecyclerView實現瀑布流。在用 StaggeredGridLayoutManager 完成瀑布流的過程中發現一個問題：它並不像pullToRefresh 那樣是穩定的list,而是item之間頻繁交換位置,有時候甚至會出現第一列和第二列完全互

c# 用委託和事件實現不同窗體間的通訊(一)

　C# 中的“事件”是當物件滿足一定條件，發生某些事情時，類向該類的客戶提供通知的一種方法。使用事件，擁有該事件的物件不必知道需要通知誰，一旦滿足了某個條件，將自動呼叫該事件，正確通知每個需要通知的物件。通過使用事件，提高了程式的模組化程度。例子：通過form1開啟f

微信中禁止頁面上下滑動 ios android通用親測可行

document.body.addEventListener('touchmove', function (e) { e.preventDefault(); //阻止預設的處理方式(阻止下拉滑動的效果

html5 touch事件實現觸屏頁面上下滑動(一)

相關推薦