移动端网页特效
1.触屏事件touch
常见的触屏事件
1.2 触摸事件对象（TouchEvent）
触摸事件对象重点三个常见对象列表
当手指离开屏幕的时候 就没有了touches 和 targetTouches 列表 但是会有 changedTouches
用的多的是targetTouches
<script type="text/javascript"> div.addEventListener('touchmove',function(e){ //targetTouches[0] 就可以得到正在触摸的dom元素的第一个手指的相关信息 比如 手指的坐标 等 console.log(e.targetTouches[0]); }) </script>
1.3 移动端拖动元素
① touchstart、touchmove、touchend 可以实现拖动元素
② 拖动元素需要当前手指的坐标值 我们可以使用 targetTouches[0]里面的pageX 和 pageY
③ 移动端拖动的原理：手指移动中，计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离
④ 手指移动的距离： 手指滑动中的位置 - 手指刚开始触摸的位置
拖动元素三步曲：
（1）触摸元素touchstart: 获取手指初始坐标，同时获得盒子原来的位置
（2）移动手指touchmove: 计算手指的滑动距离，并且移动盒子
（3）离开手指touchend
注意：手指移动也会触发滚动屏幕所以这里要组织默认的屏幕滚动e.preventDefault();
<script type="text/javascript">
var div = document.querySelector('div');
var startX = 0;//获取手指初始坐标
var startY = 0;
var X = 0;//获得盒子原来位置
var Y = 0;
div.addEventListener('touchstart',function(e){
//获取手指初始坐标
startX = e.targetTouches[0].pageX;
startY = e.targetTouches[0].pageY;
x = this.offsetLeft;
y = this.offsetTop;
});
div.addEventListener('touchmove',function(e){
//计算手指移动距离：手指移动之后的坐标减去手指初始的坐标
var moveX = e.targetTouches[0].pageX - startX;
var moveY = e.targetTouches[0].pagey - startY;
this.style.left = x + moveX +'px';
this.style.top = y + moveY + 'px';
e.preventDefault();//阻止屏幕滚动的默认行为
})
</script>
2.移动端常见特效
检测过渡完成事件 transitionend
classList属性
classList属性是HTML5新增的一个属性。返回元素的类名。但是IE10以上版本支持。
<div class="one two">
</div>
<button>开关灯</button>
<script type="text/javascript">
var div = document.querySelector('div');
var btn = document.querySelector('button');
//添加类名 是在后面追加类名 不会覆盖以前的类名 注意前面不需要加小点.
div.classList.add('three');
//删除类名
div.classList.remove('one');
//切换类
btn.addEventListener('click',function(){
document.body.classList.toggle('bg');
})
</script>
手机焦点图滚动 案例
<!--焦点图模块--> <div class="focus"> <ul> <li><img src="upload/focus3.jpg" /></li> <li><img src="upload/focus1.jpg" /></li> <li><img src="upload/focus2.jpg" /></li> <li><img src="upload/focus3.jpg" /></li> <li><img src="upload/focus1.jpg" /></li> </ul> <!--小圆点--> <ol> <li class="current"></li> <li></li> <li></li> </ol> </div>
.focus{ position: relative; width: 100%; overflow: hidden; } .focus img{ width: 100%; margin-top: -70px; } .focus ul{ overflow: hidden; width: 500%; margin-left: -100%; } .focus ul li{ float: left; width: 20%; } .focus ol{ position: absolute; bottom: 5px; right: 5px; margin: 0; } .focus ol li{ display: inline-block; width: 5px; height: 5px; background-color: #fff; list-style: none; border-radius: 2px; transition: all .3s } .focus ol li.current{ width: 15px; }
window.addEventListener('load',function(){
//获取元素
var focus = document.querySelector('.focus');
var ul = focus.children[0];
var ol = focus.children[1];
//获得focus的宽度
var w = focus.offsetWidth;
//利用定时器自动轮播图片
var index = 0;
var timer = setInterval(function(){
index++;
var translateX = -index * w;
ul.style.transition = 'all .3s';
ul.style.transform ='translateX('+ translateX +'px)';
},2000);
//等过渡完成之后，再去判断 监听过渡完成的事件 transitionend
ul.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)';
}
//3.小圆点跟随变化
//把ol里面li带有current类名的选出来去掉类名 remove
ol.querySelector('.current').classList.remove('current');
//把当前索引号的li加上current add
ol.children[index].classList.add('current');
});
//4.手指滑动轮播图
//触摸元素 touchstart：获取手指初始坐标
var startX = 0;
var moveX = 0;
var flag = false;
ul.addEventListener('touchstart',function(){
startX = e.targetTouches[0].pageX;
//手指触摸的时候就停止定时器
clearInterval(timer);
});
//移动手指touchmove：计算手指的滑动距离，并且移动盒子
ul.addEventListener('touchmove',function(e){
//计算移动距离
moveX = e.targetTouches[0].pageX;
//移动盒子： 盒子原来位置 + 手指移动距离
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){
//(1)如果移动距离大于50像素 就播放上一张或下一张 取绝对值
if(Math.abs((moveX)>50)){
//如果右滑就是播放上一张 moveX 是正值
if(moveX > 0){
index--;
}else{
//如果左滑就是播放下一张 moveX 是负值
index++;
}
var translateX = -index*w;
ul.style.transition = 'all .3s';
ul.style.transform = 'translateX('+ translatex +'px)';
}else{
//(2)如果移动距离小于50像素 就回弹
var translateX = -index*w;
ul.style.transition = 'all .1s';
ul.style.transform = 'translateX('+ translatex +'px)';
}
}
//手指离开的时候就重新开启定时器
clearInterval(timer);
timer = setInterval(function(){
index++;
var translateX = -index * w;
ul.style.transition = 'all .3s';
ul.style.transform ='translateX('+ translateX +'px)';
},2000);
});
})
2.2 click延时解决方案
移动端click事件会有300ms的延时，原因是移动端屏幕双击会缩放(double tap to zoom)页面。
（1）禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟。
<meta name="viewport" content="user-scalable=no" />
（2）利用touch事件自己封装这个事件解决300ms延迟。
原理：
① 当我们手指触摸屏幕，记录当前触摸时间
② 当我们手指离开屏幕，用离开的时间减去触摸的时间
③ 如果时间小于150ms，并且没有滑动过屏幕，那么我们就定义为点击
（3）使用插件。fastclick插件解决300ms延迟。
GitHub 官网地址：https://github.com/ftlabs/fastclick
首页导入fastclick JS文件
if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false);
3.3 Swiper 插件的使用
中文官网地址： https://www.swiper.com.cn
① 引入插件相关文件
② 按照规定语法使用
3.4 其他移动端常见插件
· superslide：http://www.superslide2.com
· iscoll：http://github.com/cubiq/iscroll
浙公网安备 33010602011771号