我要评论1、首先要添加移动端meat标签
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
width：视口的宽度，width=device-width：宽度是设备的宽度
initial-scale：初始化缩放，- initial-scale=1.0：不缩放
user-scalable：是否允许用户自行缩放，取值0或1，yes或no
minimum-scale：最小缩放
maximum-scale：最大缩放
一般设置了不允许缩放，就没必要设置最大最小缩放了。
2、移动端的三个事件
touch触摸事件要用DOM2级绑定事件；移动端也支持onclick鼠标点击事件，但是会有300ms的延迟
①touchstart()触摸事件
②touchmove()触摸移动事件
③touchend()触摸离开事件
3、移动端事件对象
touchstart和touchmove需要通过e.touches获取手指的触摸信息
touchend需要e.changedTouches获取手指的触摸信息
案例：
1 box.addEventListener("touchstart",function(e) {
2 var a = e.touches[0].clientX;//手指触摸时的坐标
3 console.log(a)
4 },false)
5 box.addEventListener("touchmove",function(e) {
6 var b = e.touches[0].clientX;//手指移动时的坐标
7 console.log(b)
8 })
9 box.addEventListener("touchend",function(e) {
10 var c = e.changedTouches[0].clientX;//手指离开时的坐标
11 console.log(c)
12 })
4、过渡事件和动画事件
①过渡事件transitioned，元素过渡完成的时候执行
// 过度事件
box.addEventListener("transitionend", function() {
console.log("过度完成")
})
②动画事件animationstart，动画开始时触发
动画事件animationend，动画结束时触发
// 动画开始事件
box1.addEventListener("animationstart", function() {
console.log("动画开始")
})
// 动画结束事件
box1.addEventListener("animationend", function() {
console.log("动画结束")
})
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论