前端攻城狮---css3之触摸事件
基础
其实移动端也能响应click，只不过响应的⽐较慢，⼀般移动端都是⽤touch事件。
touch事件⼀般有三个
touchstart ：当⼿指触摸屏幕的回调，即使是⼀只⼿指头。
touchmove：⼿指在屏幕上滑动时触发。
touchend：当⼿指从屏幕上移开时触发。
给元素绑定触摸事件，使⽤dom2级⽅法绑定
obj.addEventListener("touchstart",function(event){},false);
我们来看看具体的回调信息。
document.addEventListener("touchstart",function(event){
console.log("start",event);
},false);
⾸先event是⼀个对象，我们主要来看看event的⼀个属性touches
其实touches是⼀个数组，数组的长度表⽰的是触摸屏幕⼿指的数量，这⾥是⼀根⼿指头，所以数组是1，那么我们来分析⼀下⾥⾯重要的参数的意义。
client：触摸⼿指头相对于视⼝顶部的距离
page：表⽰触摸⼿指头距离页⾯顶部的距离
screen：表⽰触摸⼿指头距离显⽰器顶部的距离
⼩demo
那么结合着触发事件，我们来做⼀个拖动的⼩demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
img {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<img src="1.png" alt="">
<script>
// 得到图⽚元素
var img = document.querySelector("img");
// ⼿指距离图⽚左上⾓的误差
var deltaX,deltaY;
var nowX = 0;
var nowY = 0;
// 开始触摸
img.addEventListener("touchstart",function(event) {
deltaX = uches[0].clientX - nowX;
deltaY = uches[0].clientY - nowY;
});
img.addEventListener("touchmove",function(event) {
nowX = uches[0].clientX - deltaX;
nowY = uches[0].clientY - deltaY;
img.style.left = nowX + "px";
p = nowY + "px";
});
</script>
</body>
</html>
实战1：轮播图(js版本)
效果如下
可以看成上⾯的模型，⾸先我们需要利⽤绝对定位，让每⼀个li脱标，通过left/right去控制last，now，next显⽰对应的图⽚。最开始⽤户第⼀眼所见到的当然是第⼀张页⾯，当⽤户向左滑动时，now、next将会向左滑动⼿势的距离，若滑动的距离⼤于我们的所规定的最⼩滑动距离，则释放⼿势的时候页⾯继续滑动，直⾄滑动到屏幕的宽度的距离，那么此时的last就是第⼀张页⾯，now就是第⼆章页⾯，next就是第三章页⾯。
第⼀步，编写基本逻辑，通过循环让轮播图动起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.banner{
width: 100%;
overflow: hidden;
}
.banner ul{
height: 100%;
list-style: none;
}
.banner ul li{
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.banner li>a>img{
width: 100%;
display: block;
}
</style>
</head>
<body>
<div class="banner" id="banner">
<ul>
<li><a href="#"><img src="img/0.png" alt=""></a></li>
<li><a href="#"><img src="img/1.png" alt=""></a></li>
<li><a href="#"><img src="img/2.png" alt=""></a></li>
<li><a href="#"><img src="img/3.png" alt=""></a></li>
<li><a href="#"><img src="img/4.png" alt=""></a></li>
</ul>
</div>
</div>
<span>asdasdasdasd</span>
<script type="text/javascript">
let banner = ElementById("banner");
let banner_img = document.querySelectorAll("#banner li");
let outwidth = document.documentElement.clientWidth;
let now = 0;
let next = 1;
let last = 4;
init();
let timer = setInterval(()=>{
timerfun();
},3000);
function timerfun(){
last = now;
js控制css3动画触发now = next;
next++;
if(next>4)
next = 0;
banner_img[last].ansition = "all 0.3s ease 0s";
banner_img[now].ansition = "all 0.3s ease 0s";
banner_img[next].ansition = "none";
banner_img[last].ansform = "translateX("+(-outwidth)+"px)";                banner_img[now].ansform = "translateX(0px)";
banner_img[next].ansform = "translateX("+outwidth+"px)";            }
function init (){
banner.style.height=parseInt(120*outwidth/200)+"px";
for(let i = 0;i<banner_img.length;i++){
banner_img[i].ansform = "translateX("+outwidth+"px)";
}
banner_img[last].ansition = "none";
banner_img[now].ansition = "none";
banner_img[next].ansition = "none";
banner_img[last].ansform = "translateX("+(-outwidth)+"px)";
banner_img[now].ansform = "translateX(0px)";
banner_img[next].ansform = "translateX("+outwidth+"px)";
}
}
</script>
</body>
</html>
其实就是通过css3的动画属性 transform和transition去实现
第⼆步，结合⼿势去实现滑动翻页的效果
<script type="text/javascript">
let banner = document.querySelector("#banner");
let banner_img = document.querySelectorAll("#banner li");
let outwidth = document.documentElement.clientWidth;
let now = 0;
let next = 1;
let last = 4;
init();
let timer = setInterval(timerfun,3000);
let startX = 0;
let moveX = 0;
let moveX = 0;
let startTime = 0;
banner.addEventListener("touchstart",touchstartfun,false);
banner.addEventListener("touchmove",touchmovefun,false);
banner.addEventListener("touchend",touchendfun,false);
function touchstartfun(event){
event.preventDefault();
uches.length==1){
clearInterval(timer);
timer = null;
startX = uches[0].clientX;
startTime = new Date();
banner_img[last].ansition = "none";
banner_img[now].ansition = "none";
banner_img[next].ansition = "none";
}
}
function touchmovefun(event){
event.preventDefault();
uches.length==1){
let moveX = uches[0].clientX-startX;
banner_img[last].ansform = "translateX("+(moveX-outwidth)+"px)";                banner_img[now].ansform = "translateX("+(moveX)+"px)";
banner_img[next].ansform = "translateX("+(outwidth+moveX)+"px)";                }
}
function touchendfun(event){
event.preventDefault();
moveX = event.changedTouches[0].clientX-startX;
let endTime = new Date()-startTime;
if(moveX>0&&moveX>(outwidth/2)&&endTime>300){
next = now;
now = last;
last--;
if(last<0)
last = 4;
banner_img[last].ansition = "none";
banner_img[now].ansition = "all 0.3s ease 0s";
banner_img[next].ansition = "all 0.3s ease 0s";
banner_img[last].ansform = "translateX("+(-outwidth)+"px)";
banner_img[now].ansform = "translateX(0px)";
banner_img[next].ansform = "translateX("+outwidth+"px)";
}else if(moveX<0&&Math.abs(moveX)>(outwidth/2)&&endTime>300){
timerfun();
}else{
banner_img[last].ansition = "all 0.3s ease 0s";
banner_img[now].ansition = "all 0.3s ease 0s";
banner_img[next].ansition = "all 0.3s ease 0s";
banner_img[last].ansform = "translateX("+(-outwidth)+"px)";
banner_img[now].ansform = "translateX(0px)";
banner_img[next].ansform = "translateX("+outwidth+"px)";
}
timer = setInterval(timerfun,3000);
}
function timerfun(){
last = now;
now = next;
next++;
if(next>4)
next = 0;
banner_img[last].ansition = "all 0.3s ease 0s";
banner_img[now].ansition = "all 0.3s ease 0s";
banner_img[next].ansition = "none";
banner_img[last].ansform = "translateX("+(-outwidth)+"px)";
banner_img[now].ansform = "translateX(0px)";
banner_img[next].ansform = "translateX("+outwidth+"px)";

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。