js 移动端网页特效+移动端轮播图案例+移动端常用开发插件的使用

触屏事件

常见触屏事件：

触屏touch事件	说明
touchstart	手指触摸到DOM元素时触发
touchmove	手指在DOM元素上滑动时触发
touchend	手指从一个DOM元素上移开时触发

触摸事件对象（TouchEvent）
touches：正在触摸屏幕的所有手指列表。
targetTouches：正在触摸当前DOM元素的所有手指列表。
changedTouches：手指状态发生改变的列表，从无到有或者是从有到无。

如果侦听的是DOM元素touches和targetTouches是相同的。当手指离开时就没有这两个了。
经常使用的是targetTouches。
e.targetTouches[0],这样可以得到触摸元素的第一个手指的信息。

移动端拖动元素
（1）手指触摸屏幕touchstart，获得手指初始坐标的位置，同时获得盒子的位置。
（2）手指移动touchmove，计算手指滑动的距离，并且移动盒子。
（3）手指离开touchend。

<style>div{position: absolute;/* 盒子有定位可以通过left值来移动盒子 */left: 0;width: 50px;height: 50px;background-color: pink;}</style>

<body><div></div><script>// （1）手指触摸屏幕touchstart，获得手指初始坐标的位置，同时获得盒子的位置。// （2）手指移动touchmove，计算手指滑动的距离，并且移动盒子。// （3）手指离开touchend。//获取事件var div = document.querySelector('div');//绑定触发var startX=0; //手指的初始坐标,因为在其他事件中也要使用,所以设置为全局变量var startY=0;var boxX = 0 ; //盒子原来的位置var boxY = 0 ;div.addEventListener('touchstart',function(e){//获得手指的初始坐标startX =e.targetTouches[0].pageX;startY =e.targetTouches[0].pageY;//获得盒子的初始位置boxX = this.offsetLeft;boxY = this.offsetTop;});div.addEventListener('touchmove',function(e){//计算手指移动的距离 = 手指移动后的坐标减去初始坐标var moveX =e.targetTouches[0].pageX - startX;var moveY =e.targetTouches[0].pageY - startY;//移动盒子位置   盒子初始位置+手指移动端位置this.style.left = boxX + moveX +'px';this.style.top = boxY + moveY + 'px';//阻止屏幕滚动的行为e.preventDefault();});</script></body>

移动端常见特效

移动端轮播图
1、自动播放图片

//1.自动轮播//获取元素var focus = document.querySelector('.focus');var ul = focus.children[0];//获取focus 的宽度var w = focus.offsetWidth;var flag =false;//获取olvar ol = document.querySelector('ol');//2.利用定时器实现自动播放var index = 0;var timer = setInterval(function(){index++;var translatex = -index * w;ul.style.transition = 'all 0.3s';ul.style.transform = 'translateX('+translatex+'px)';},2000);//过渡完成之后再去监听过渡完成的事件 transitionedul.addEventListener('transitionend',function(){//无缝滚动if(index >= 3){index = 0;//去掉过渡效果,让ul快速跳到目标位置ul.style.transition = 'none';//继续做动画var translatex = -index * w;ul.style.transform = 'translateX('+translatex+'px)';}else{if(index<0){index = 2;ul.style.transition = 'none';//继续做动画var translatex = -index * w;ul.style.transform = 'translateX('+translatex+'px)';}}//小圆点跟随变化//把ol里面带有current的类选出来,removeol.querySelector('.current').classList.remove('current');//再把当页面当前索引号加上current类  ,addol.children[index].classList.add('current');})

2、手指拖动播放轮播图
classList 返回元素的类名，在元素中添加（在后面追加类名不会覆盖之前的类名，不需要加点），移除类名
element.classList.add(‘类名’)；
element.classList.remove(‘类名’)；
切换类名： element.classList.toggle(‘类名’)；//有这个类名就去掉，没有就加上。

//2.手指拖动播放轮播图var startX=0;var moveX =0;// （1）手指触摸屏幕touchstart，获得手指初始坐标的位置，ul.addEventListener('touchstart',function(e){startX = e.targetTouches[0].pageX;//手指触摸时定时器也要关闭clearInterval(timer);})// （2）手指移动touchmove，计算手指滑动的距离ul.addEventListener('touchmove',function(e){//手指移动的距离=现在的位置-初始位置moveX = e.targetTouches[0].pageX -startX;//ul盒子移动位置var translatex =-index * w + moveX;ul.style.transition = 'none';ul.style.transform = 'translateX('+ translatex +'px)';flag =true;//如果用户手指移动过再去做判断,如果没有移动则不需要判断e.preventDefault();//阻止滚动屏幕的默认行为})//手指触摸结束后判断移动位置然后进行跳转ul.addEventListener('touchend',function(e){if(flag=true){if(Math.abs(moveX)>50){//if移动距离大于0往右划,跳转到上一张图片if(moveX>0){index --;}else{index++;}var translatex =-index * w ;ul.style.transition = 'all 0.3s';ul.style.transform = 'translateX('+ translatex +'px)';}else{//如果小于50就返回到当前页面var translatex =-index * w ;ul.style.transition = 'all 0.3s';ul.style.transform = 'translateX('+ translatex +'px)';}//时候离开时再开启定时器,开启之前先清除定时器clearInterval(timer);timer = setInterval(function(){index++;var translatex = -index * w;ul.style.transition = 'all 0.2s';ul.style.transform = 'translateX('+translatex+'px)';},2000);}});

移动端常用开发插件

移动端click会有300ms的延迟事件，原因是移动端双击屏幕会缩放（double to zoom）页面。

解决方案：
1、禁止用户缩放，在视口标签content中添加语句：user-scalable=no
2、利用touch事件自己封装这个事件解决300m延迟。
3、使用js插件解决
fastclick插件解决300ms延迟。使用延迟
githhub官网网址：https：//github.com/ftable/fastclick

引入fastclick.js文件
再写入以下代码：

if ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function() {FastClick.attach(document.body);}, false);
}

swiper插件的使用
网址：https://www.swiper.com.cn/index.html
再首页添加swiper的css文件和js文件
加载插件，需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件；不同版本文件名不同可以到官网查看。
1.引入相关文件

 <!-- 引入swiper相关文件 --><link rel="stylesheet" href="css/swiper-bundle.min.css"><script src="js/swiper-bundle.min.js"></script><script src="js/index.js"></script>

2.按照规定语法使用
再demo文件中找到想要的样式查看源代码
复制html代码
复制css代码
复制js代码