移动端JS特效
触屏
触屏事件概述
touch代表一个触控点。也就是我们的手指,或者是触控笔。触控事件可以响应用户的触摸操作。
触控事件
触控事件 | 说明 |
---|---|
touchstart | 手指摸到一个DOM元素时,触发。 |
touchmove | 手指在一个DOM元素上滑动时,触发。 |
touchend | 手指从一个DOM元素上移开时,触发。 |
常用形式
元素.addEventListener('touchstart',处理函数);
元素.addEventListener('touchmove',处理函数);
元素.addEventListener('touchend',处理函数);
触控事件对象
触控事件对象,一个伪数组,它包含了许多触控相关系列的信息。touchEvent
触控列表 | 说明 |
---|---|
touches | 正在触摸手指的列表。 |
targetTouches | 正在触摸DOM元素上的手指列表。 |
changedTouches | 手指状态发生改变的列表,从有到无,从无到有。 |
常用形式
元素.addEventListener('touches',处理函数);
元素.addEventListener('targetTouches',处理函数);
元素.addEventListener('changedTouches',处理函数);
过渡事件
在我们需要制作动画时,添加了过渡动画。部分功能需要在过渡动画之后发生,那么就可以使用 transitionend
事件。
名称 | 说明 |
---|---|
transitionend | 过渡动画结束时,触发。 |
常用形式
元素.addEventListener('transitionend',处理函数);
classList类名列表
classList是HTML5新增属性,伪数组形式存储元素的类名信息。IE10以上支持
该属性拥有添加、修改、删除类名的方法。
名称 | 说明 |
---|---|
classList.add() | 添加类名 |
classList.remove() | 删除类名 |
classList.toggle() | 切换类名 |
常用形式
元素.classList.add('类名')//不加.
元素.classList.remove('类名')
元素.classList.toggle('类名')
click点击延时
在移动端,由于双击会缩放页面,所以click点击事件存在300ms的延时,用于区分两者。
解决方案:
- 禁止窗口缩放【直接在html标签中添加】
<meta name="viewport" content="user-scalable=no">
- 通过touch事件封装一个函数解决
- 使用插件。fastclick
插件
解决。
常用函数
插件和框架
什么事插件?
插件就是一个JS文件,他有一定的书写规范,方便展示效果,拥有特定功能且方便调用。如轮播图和瀑布插件。
插件的使用流程:
- 引入插件的JS文件,如果有CSS文件也需要引入。
- 插入插件提供的网页骨架。
- 根据需求微调。
Swiper
开源、免费、强大的触摸滑动插件。-主要使用在滑动图片,焦点图。
SuperSilder
SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等等。
Bootstrap框架
本地存储
为什么需要本地存储呢?
答:因为互联网高速发展,数据量不断增大。很多数据不需要频繁向数据库读写,在本地存储起来,提高网页效率和降低资源损耗。
window.sessionStorage
- 生命周期为关闭浏览器窗口。
- 在同一窗口(页面)下数据可以共享。
- 以
键值对
的方式存储数据。
名称 | 说明 |
---|---|
sessionStorage.setItem(键,值) | 存储键值对 |
sessionStorage.getItem(键) | 获取值 |
sessionStorage.removeItem(键) | 删除键值对 |
sessionStorage.clear() | 清除所有键值对 |
常用形式
<!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>
* {
padding: 0;
margin: 0;
}
.box {
padding: 10px;
text-align: left;
}
input {
height: 22px;
}
button {
padding: 2px;
margin: 0 5px;
outline: none;
border: 1px solid #000;
background-color: #fff;
font-size: 16px;
vertical-align: middle;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box"><input type="text"><button class="set">写入数据</button><button class="get">读取数据</button><button class="remove">删除数据</button><button class="det">清空所有数据</button></div>
<script>
// 获取元素
var input = document.querySelector('input');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var remove = document.querySelector('.remove');
var del = document.querySelector('.det');
set.addEventListener('click', function() {
var value = input.value; //获取输入框的值
sessionStorage.setItem('uname', value); //本地储存
});
get.addEventListener('click', function() {
var value = sessionStorage.getItem('uname'); //获取值
console.log(value);
});
remove.addEventListener('click', function() {
sessionStorage.removeItem('uname'); //删除值
});
del.addEventListener('click', function() {
sessionStorage.clear(); //清除所有值
});
</script>
</body>
</html>
window.localStorage
使用方法与 sessionStorage
相同。
- 生命周期为永久。
- 在统一窗口(页面)下数据可以共享。
- 以
键值对
的方式存储数据。
名称 | 说明 |
---|---|
localStorage.setItem(键,值) | 存储键值对 |
localStorage.getItem(键) | 获取值 |
localStorage.removeItem(键) | 删除键值对 |
localStorage.clear() | 清除所有键值对 |
JSON.stringify(数组对象);//将数组对象转换为JSON字符串,这样就解决了数组无法直接存储到本地存储中使用。
JSON.parse(字符串对象);//将字符串转换为数组。
事件
change
在元素发生改变时,触发。如:复选框的变化。
元素.addEventListener('change',处理函数);