Html5 移动端 触摸滑动事件

作者:分分快三计划

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

//
$(".imagestart").on("touchend", function (e) {
//当手指松手的时候 总结鼠标移动开首到甘休 x轴变化多少
var MoveX = loadX - MoveUp;
if (MoveX<0) {
MoveX = MoveUp - loadX;
}

<!DOCTYPE html>
<html xmlns=";
<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;

 

//
$(".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);

以下代码通过测量试验  没不不荒谬 且能够循环滑动

} else {
//要是移动的地点荧屏的伍分之一紧跟于 则图片重临到最早的岗位
$(this).animate({ "letf": "0px" },0);
}
//复苏起来坐标
loadX = 0;
//复苏鼠标松手坐标
MoveUp = 0;

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

$(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").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();
}

 

})
//

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划