动画原理
核心原理:通过定时器setlnterval()不断移动盒子位置
实现步骤:
- 获取盒子当前的位置
- 让盒子在当前位置加上1个移动距离
- 利用定时器不断重复这个操作
- 加一个结束定时器的条件
- 注意此元素需要添加定位,才能使用element.style.left
动画函数的封装
注意函数需要传递2个参数,动画对象和移动到的距离(即object和target )
可以给不同元素记录不同定时器
当我们不断点击按钮,这个元素的速度会越来越快,因为开启了太多定时器。结局方法就是,在代码中添加“clearInterval()”,让元素只有一个定时器,即清除以前的定时器,只保留当前的一个定时器执行
缓动动画原理
缓动动画公式:(目标值 - 现在的位置)/10 ,将此作为每次移动的距离(步长)
如:
var step = (target - obj.offsetLeft) / 10;
停止条件是:让当前盒子位置等于目标位置就停止定时器
缓动动画多个目标值之间移动
- 步长为+,向上取整,math.ceil;
- 步长为-,向下取值math.floor
缓动动画添加回调函数
回调函数原理:将这个函数作为参数传到另一个函数里,当那个函数执行完之后,再执行传进去的这个函数,这个过程就叫做回调。
回调函数写的位置:定时器结束的位置
动画函数的使用
将动画函数封装到单独JS文件里面
节流阀
防止轮播图按钮连续点击造成播放过快
节流阀目的:当上一个函数动画内容执行完毕,再去执行下一个函数动画,让事件无法连续触发
- var flag = true;
- if(flag){
- flag = false;
- do sth;
- }//关闭水龙头
-
- flag=true;//开启水龙头
触屏事件
触屏事件 说明 touchstart 手指触摸到一个DOM元素时触发 touchmove 手指在一个DOM元素上滑动时触发 touchend 手指从一个DOM元素上移开时触发
触摸事件对象
触摸列表 说明 touches 正在触摸屏幕的所有手指的一个列表 targetTouches 正在触摸当前DOM元素上的手指的一个列表 changedTouches 手指状态发生了改变的列表,从无到有,从有到无变化 当我们的手指离开屏幕时,就没有了touches和targetTouches列表,但是会有changedTouches
重点记住targetTouches
移动端拖动元素
- touchstart、touchmove、touchend可以实现拖动元素
- 但是拖动元素需要当前手指的坐标值我们可以使用targetTouches[0]里面的pageX和pageY
- 移动端拖动的原理:手指移动中,计算出手指移动的距离。然后用盒子原来的位置+手指移动的距离
- 手指移动的距离:手指滑动中的位置减去手指钢刚开始触摸的位置
拖动元素三部曲
- 触摸元素touchstart:获取手指初始坐标,同时获得盒子原来的位置
- 移动手指touchmove:计算手指的滑动距离,并且移动盒子
- 离开手指touchend;
注意:手指移动也会触发滚动屏幕,所以这里要阻止默认的屏幕滚动e.preventDefault();
移动端常用开发插件
fastclick.js
解决延时问题
引用插件:<script type = ' application / javascript ' src= ' / path / to / fastclick.js ' > </script>
语法格式:
if ('addEventListener'in document){ document.addEventListener('DOMContentLoaded',function(){ Fastclick.attach(document.body); }false);Swiper.js
文件准备:下载过后,在dist文件中找到引用文件css和js,直接选中文件拖拽到VScode就行
引用文件:
- 引入swipercss文件:<link rel="stylesheet"href="css/swiper.min.css">
- 引入swiper js文件:<script src="js/swiper.min.js"></script>
语法格式:
打开想用的文件,F12,依次复制粘贴html、css、js文件
用法总结:
- 打开demo实例文件,查看需要入的相关文件,并且引入
- 复制demo实例文件中的结构html,样式css以及js代码
移动端常用开发框架
框架,顾名思义就是一套架构,它会基于自身的特点,向用户提供一套较为完整的解决方案。框架的控制权在框架本身,使用者要按照框架所规定的某种规范进行开发。
本地存储特性:
- 数据存储在用户浏览器中
- 设置、读取方便、甚至页面刷新不丢失数据
- 容量较大、sessionStorage约5M、localStorage约20M
- 只能存储字符串,可以将对象JSON.stringify()编码后存储
window.sessionStorage
- 生命周期为关闭浏览器窗口
- 在同一个窗口(页面)下数据可以共享
- 以键值对的形式存储使用
- 存储数据:
sessionStorage.setItem(key,value);
- 获取数据:
sessionStorage.getItem(key);
- 删除数据:
sessionStorage.removeItem(key);
- 删除所有数据
sessionStorage.clear();
window.localStorage
- 生命周期永久生效,除非手动删除否则关闭页面也会存在
- 可以多窗口(页面)共享(同一浏览器可以共享)
- 以键值对的形式存储使用
- 存储数据:
localStorage.setltem(key,value)
- 获取数据:
localStorage.getltem(key)
- 删除数据:
localStorage.removeltem(key)
- 删除所有数据:
localStorage.removeltem(key)