触碰时展开的html,Html5 移动端 触摸滑动事件

Html5 移动端 触摸滑动事件以下代码经过测试  没有问题 且可以循环滑动

&lt享器哈班其础件事是架考发求关通互面待需了;!DOCTYPE html&是能览调不页新代些事几求事都时学下是事功过gt;

html5测试

       

       

       

//初始化获取浏览器的屏幕的宽度

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;

})

//

})

本文来源于网络：查看 >https://blog.csdn.net/qq_37499645/article/details/77433875