首頁 > 開發者 > 手機程式開發

Html5 移動端 觸摸滑動事件

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：one   let   觸摸   移動元素   返回   meta   index   touch   href   

以下代碼經過測試  沒有問題 且可以迴圈滑動

 

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5測試</title>
<link href="Css/Index.css" rel="stylesheet" />
</head>
<body>
<div id="Index" style="text-align: center; width: auto;">
<img src="img/1.jpeg" class="imagestart" style="display: block;" data-id="1" />
<img src="img/2.jpeg" class="imagestart" data-id="2" />
<img src="img/3.jpeg" class="imagestart" data-id="3" />
</div>
<script src="/js/jquery-1.12.4.min.js"></script>
<script>
//初始化擷取瀏覽器的螢幕的寬度
var LoadWidth = parseInt($(window).width());
//初始化觸摸起點X軸
var loadX = 0;
//初始化觸摸起點Y軸
var loadY = 0;
//初始化滑鼠鬆開的X軸
var MoveUp = 0;

$(function () {
//
$(".imagestart").on(‘touchstart‘, function (e) {
var id = e.originalEvent.targetTouches[0];
//擷取滑鼠的起始位置x
var x = id.pageX;
//賦值起始位置x
loadX = x;
//點擊時賦值滑鼠起來的座標 在移動的時候會更新這個變數
MoveUp = x;
//擷取滑鼠的起始位置y
var y = id.pageY;
loadY = y;
$(this).css(‘position‘, ‘fixed‘);
})
//

//
$(".imagestart").on("touchmove", function (e) {
var id = e.originalEvent.targetTouches[0];
//擷取滑鼠的每次移動位置x
var x = id.pageX;
MoveUp = x;
//擷取滑鼠的每次移動位置y
var y = id.pageY;
var ThisLoad = $(this);var ddd = x - loadX;
//移動元素
ThisLoad.animate({ ‘left‘: x - loadX + "px" }, 0);

if ($(this).attr("data-id") == 3) {
//$(".imagestart").hide();
$(".imagestart").eq(0).show();
} else {
$(this).next().show();
}
})
//

//
$(".imagestart").on("touchend", function (e) {
//當手指鬆開的時候 計算滑鼠移動開始到結束 x軸變化多少
var MoveX = loadX - MoveUp;
if (MoveX<0) {
MoveX = MoveUp - loadX;
}

$(".imagestart").css("left", "0px");
//如果移動的x軸 大於瀏覽器寬度的3/10 則換圖片
if (MoveX / LoadWidth > 0.4) {
if ($(this).attr("data-id") == 3) {
//隱藏所有
$(".imagestart").hide();
//清空元素的style
$(".imagestart").removeAttr("style");
//讓第一個顯示
$(".imagestart").eq(0).css("display", "block");
} else {
//隱藏當前
$(this).css("display", "none");
//顯示下一個元素
$(this).next().show();
}

} else {
//如果移動的位置螢幕的40%小於 則圖片返回到初始的位置
$(this).animate({ "letf": "0px" },0);
}
//恢複初始座標
loadX = 0;
//恢複滑鼠鬆開座標
MoveUp = 0;

})
//

})
</script>
</body>
</html>

Html5 移動端 觸摸滑動事件

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More