本人接触前端不久，写的不好的请多多指教，欢迎指出
最近做到一个需求需要实现移动端的手势操作，在网上有找到不少不错的插件（PS：就不打广告了，一搜一大堆）
插件用起来确实不错，不过自己想研究下，便写了一个demo，实现了上拉、下拉触发，及左右手势滑动触发
上拉、下拉触发用了
$(window).scroll（） //当滚动条滚动时触发
scrollTop（）（滚动条距离顶部的高度）
$(document).height(当前页面的总高度)
$(this).height(当前可视的页面高度);
具体请看下面附上代码
左右手势滑动触发
使用了js的addEventListener监听，
分别监听-touchstart事件，touchmove事件，touchend事件，主要获取clientX，clientY属性
touchstart：当鼠标点击屏幕时触发
touchmove：当鼠标在屏幕移动时触发
touchend：当鼠标离开屏幕时触发
属性：event.touches[0].clientX，event.touches[0].clientY获取x，y坐标
直接上代码，请多指教（PS：请使用移动模式调试）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>下拉刷新，滚动翻页</title>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<style>
li{border:1px solid #dfdfdf;height:50px;position:relative;width:140%}
li div{width:30%;height:30px;float:right}
</style>
</head>
<body>
<div style="height:1000px;overflow-x:hidden;">
<p class="sdf">x:,y:</p>
<p class="sf">x:,y:</p>
<div class="2">
<li id="1"><div style="background-color:red;"></div></li>
<li id="2"><div style="background-color:blue;"></div></li>
<li id="3"><div style="background-color:green;"></div></li>
<li id="4"><div style="background-color:black;"></div></li>
<li id="5"><div style="background-color:gray;"></div></li>
</div>
</div>
<script>
$(document).ready(function(){
$(window).scroll(function(){
var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度
var scrollHeight = $(document).height(); //当前页面的总高度
var windowHeight = $(this).height(); //当前可视的页面高度
if(scrollTop + windowHeight >= scrollHeight){ //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
alert("上拉加载，要在这调用啥方法？");
}else if(scrollTop<=0){ //滚动条距离顶部的高度小于等于0
alert("下拉刷新，要在这调用啥方法？");
}
});
var obj;
var startx;
var starty;
var overx;
var overy;
for(var i=1;i<=$("li").length;i++){ //为每个li标签添加事件
obj = document.getElementById(i); //获取this元素
evenlistener(obj); //调用evenlistener函数并将dom元素传入，为该元素绑定事件
}
function evenlistener(obj){
obj.addEventListener(‘touchstart‘, function(event) { //touchstart事件,当鼠标点击屏幕时触发
startx = event.touches[0].clientX; //获取当前点击位置x坐标
starty = event.touches[0].clientY; //获取当前点击位置y坐标
$(".sdf").text("x:"+startx+",y:"+starty+"") //赋值到页面显示
} , false); //false参数,设置事件处理机制的优先顺序，具体不多说，true优先false
obj.addEventListener(‘touchmove‘, function(event) { //touchmove事件,当鼠标在屏幕移动时触发
overx = event.touches[0].clientX; //获取当前点击位置x坐标
overy = event.touches[0].clientY; //获取当前点击位置y坐标
var $this = $(this); //将dom对象转化为jq对象，由于项目用到jquery，直接使用其animate方法
if(startx-overx>10){ //左滑动判断，当左滑动的距离大于开始的距离10进入
$($this).animate({marginLeft:"-55px"},150); //实现左滑动效果
}else if(overx-startx>10){ //右滑动判断，当右滑动的距离大于开始的距离10进入
$($this).animate({marginLeft:"0px"},150); //恢复
}
} , false);
obj.addEventListener(‘touchend‘, function(event) { //touchend事件,当鼠标离开屏幕时触发，项目中无用到，举例
$(".sf").text("x:"+overx+",y:"+overy+"")
} , false);
}
});
</script>
</body>
</html>
时间： 2024-10-10 01:49:24