移动端特效
目录
一、触屏事件touch
触屏事件(touch)也称触摸事件,touch对象代表一个触摸点(触摸点可能是一根手指,也可能是一根触摸笔),触屏事件可响应用户手指对屏幕或触控板操作。
1、常用的触屏事件
触屏touch事件 | 说明 |
---|---|
touchstart | 手指触摸得到一个DOM元素时触发 |
touchmove | 手指在一个DOM元素上滑动时触发 |
touchend | 手指从一个DOM元素上移开时触发 |
2、触屏事件对象touchEvent
tochEvent是一类描述手指在触摸平面的状态变化的事件。用于描述一个或多个触点
touchstart、touchmove、touchend三个事件都会各自有事件对象
触摸事件对象常见对象
触摸事件对象 | 说明 |
---|---|
touches | 正在触摸屏幕的所有手指的一个列表 |
targetTouches |
正在触摸当前DOM元素上的手指的一个列表 |
changedTouches | 手指状态发生改变的列表(从无到有、从有到无的变化) |
3、移动端拖动元素
① touchstart、touchmove、touchend三个事件可以实现拖动元素
② 获得手指当前的坐标值
,可以使用targetTouches[0]
里面的pageX
和pageY
③ 移动端拖动的原理:手指移动中,计算手指移动的距离,然后用盒子原来的距离 + 手指移动的距离
④ 手指移动的距离:手指滑动中的位置 - 手指刚开始触摸的位置
拖动三部曲
《1》触摸元素touchstart:获取手指初始坐标,同时获取盒子原来的位置
《2》移动手指touchmove:计算手指的滑动距离,并且移动盒子
《3》离开手指touchend
注意:手指移动也会触发滚动屏幕事件,因此可以阻止默认的屏幕滚动e.preventDefault()
// 移动div元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
position: absolute;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
<script>
var div = document.querySelector("div");
var x = 0;
var y = 0;
var startX = 0;
var startY = 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;
div.style.left = x + moveX + "px";
div.style.top = y + moveY + "px";
e.preventDefault();
});
div.addEventListener("touchend", function () {
});
</script>
</html>
二、移动端常见特效
1、classList属性
classList属性是HTML5新增的一个属性,返回元素的类名,但是IE10以上版本支持
该属性用于在元素中添加,移除及切换CSS类
添加类
element.classList.add("类名");
移除类
element.classList.romove("类名");
切换类
element.classList.toggle("类名");
注意点:以上方法所有类名不带点
2、移动端轮播图
前后各多放一张轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.banner {
position: relative;
width: 100%;
}
ul {
width: 500%;
}
ul,
ol,
li {
list-style: none;
padding: 0;
margin: 0;
}
ul li {
float: left;
width: 20%;
}
ol {
position: absolute;
top: 55px;
right: 30px;
}
ol li {
float: left;
width: 10px;
height: 10px;
border: 1px solid #fff;
box-sizing: border-box;
margin-right: 5px;
border-radius: 5px;
transition: all 0.3s;
}
ol .current {
background-color: #fff;
width: 20px;
}
img {
display: inline-block;
height: auto;
max-width: 100%;
}
</style>
</head>
<body>
<div class="banner">
<ul>
<li>
<img src="./img/focus3.jpg" alt="" srcset="" />
</li>
<li>
<img src="./img/focus1.jpg" alt="" srcset="" />
</li>
<li>
<img src="./img/focus2.jpg" alt="" srcset="" />
</li>
<li>
<img src="./img/focus3.jpg" alt="" srcset="" />
</li>
<li>
<img src="./img/focus1.jpg" alt="" srcset="" />
</li>
</ul>
<ol>
<li class="current"></li>
<li></li>
<li></li>
</ol>
</div>
</body>
<script>
window.addEventListener("load", function () {
var banner = document.querySelector(".banner");
var w = banner.offsetWidth;
var ul = document.querySelector("ul");
var ol = document.querySelector("ol");
var index = 0;
var timer = setInterval(function () {
index++;
var translatex = -index * w;
ul.style.transition = "all .3s";
ul.style.transform = "translateX(" + translatex + "px)";
}, 2000);
ul.addEventListener("transitionend", function () {
if (index >= 3) {
index = 0;
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.querySelector(".current").classList.remove("current");
ol.children[index].classList.add("current");
});
var startX = 0;
var moveX = 0;
var flag = false;
ul.addEventListener("touchstart", function (e) {
startX = e.targetTouches[0].pageX;
clearInterval(timer);
});
ul.addEventListener("touchmove", function (e) {
moveX = e.targetTouches[0].pageX - startX;
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) {
if (Math.abs(moveX) > 50) {
if (moveX > 0) {
index--;
} else {
index++;
}
var translatex = -index * w;
ul.style.transition = "all .3s";
ul.style.transform = "translateX(" + translatex + "px)";
} else {
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);
});
});
</script>
</html>
3、click延时解决方案
移动端 click 事件会有 300ms 的延时,原因是移动端屏幕双击会缩放(double tap to zoom) 页面。
《1》禁止缩放
浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟
<meta name="viewport" content="user-scalable=no">
《2》利用touch事件封装事件解决
原理:当手指接触屏幕事件小于150ms,并且没有滑动过屏幕,就把行为定义为点击
function tap (obj, callback) {
var isMove = false;
var startTime = 0; // 记录触摸时候的时间变量
obj.addEventListener('touchstart', function (e) {
startTime = Date.now(); // 记录触摸时间
});
obj.addEventListener('touchmove', function (e) {
isMove = true; // 看看是否有滑动,有滑动算拖拽,不算点击
});
obj.addEventListener('touchend', function (e) {
if (!isMove && (Date.now() - startTime) < 150) {
// 如果手指触摸和离开时间小于150ms 算点击
callback && callback(); // 执行回调函数
}
isMove = false; // 取反 重置
startTime = 0;
});
}
//调用
tap(div, function(){
// 执行代码 });
《3》使用插件
fastclick 插件
可以解决 300ms 延迟
三、移动端常用开发插件
插件:一般是为了解决某个问题而专门存在,其功能单一,并且比较小。
《1》swiper插件
开源、免费、强大的触摸滑动插件
中文官网地址: https://www.swiper.com.cn/
《2》SuperSlide插件
网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决!
中文官网地址:http://www.superslide2.com/
《3》iScroll插件
iScroll是一款高性能、占地面积小、无依赖性的多平台javascript滚动器
中文官网地址: https://github.com/cubiq/iscroll
四、移动端常用开发框架
框架:会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架
本身,使用者要按照框架所规定的某种规范进行开发。
前端常用的框架有**加粗样式**
等。既能开发PC端,也能开发移动端
前端常用的移动端插件有 swiper、superslide、iscroll
等。
框架和插件的区别
框架: 大而全,一整套解决方案
插件: 小而专一,某个功能的解决方案