标签：index style 手指 ulEle 819 var 移动
触屏事件
触屏事件概述
移动端浏览器兼容性较好，我们不需要考虑js的兼容性问题，可以放心使用原生js书写效果。移动端有自己独特的地方，比如触屏touch（触摸事件），Android和ios都有。touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可以响应用户手指对屏幕或者触控板的操作。
常见的触屏touch事件
touchstart 手指触摸到一个dom元素时触发
touchmove 手指在一个dom元素上滑动时触发
touchend 手指从一个dom元素上移开时触发
触摸事件对象（TouchEvent)
TouchEvent是一个描述手指在触摸平面的状态变化的事件，这类事件用于描述一个或者多个触摸点，使开发者可以检测到触点的移动，触点的增加和减少
touchstart, touchmove, touchend三个事件都有各自的事件对象
三个常见对象：
touches 正在触摸屏幕的所有手指的一个列表
targetTouches 正在触摸当前DOM元素上的手指的一个列表
changedTouches 手指状态发生了改变的列表，从无到有，从有到无变化
<script>
//1 获取元素
oDiv = document.querySelector('div')
//手指触摸dom元素事件
oDiv.addeventlistener('touchstart', function (e) {
console.log('触摸开始', e)
console.log(e.targetTouches[0])
})
//手指在dom元素上移动事件
oDiv.addeventlistener('touchmove', function () {
console.log('我移动了')
})
//手指离开dom元素事件
oDiv.addeventlistener('touchend', function (e) {
console.log('离开了',e)
//当我们手指离开屏幕的时候，就没有了touches和targetTouches，但是会有changedTouches
})
</script>
移动端拖动元素
touchstart, touchmove, touchend可以实现拖动元素
但是拖动元素需要当前手指的坐标值，我们可以使用targetTouches[0]里面的pageX和pageY
移动端拖动的原理：手指移动中，计算出手指移动的距离，然后用盒子原来的位置再加上手指移动的距离
手指移动的距离：手指滑动中的位置 减去 手指刚开始触摸的位置
拖动元素三步骤：
- 触摸元素touchstart，获取手指初始坐标，同时获得盒子原来的位置
- 移动手指touchmove，计算手指滑动的距离，并且移动盒子
- 离开手指touchend
注意：手指移动也会触发滚动屏幕，所有要阻止默认的屏幕滚动 e.preventDefault()
<script>
var oDiv = document.querySelector('div')
var startX = 0; //手指的初始坐标
var startY = 0;
var x = 0;
var y = 0; //定义盒子原来的位置
oDiv.addEventListener('touchstart', function (e) {
//获取手指初始坐标，同时获得盒子原来的位置
startX = e.targetTouches[0].pageX
startY = e.targetTouches[0].pageY
x = this.offsetLeft;
y = this.offsetTop;
})
oDiv.addEventListener('touchmove', function (e) {
//计算手指的滑动距离，手指移动后的坐标减去手指初始的坐标
var moveX = e.targetTouches[0].pageX - startX
var moveY = e.targetTouches[0].pageX - startY
//移动盒子的位置 盒子原来的位置+手指滑动的距离
this.style.left = x + moveX + 'px'
this.style.top = y + moveY + 'px'
//阻止屏幕滚动的默认行为
e.preventDefault()
})
</script>
移动端的轮播图
/*
1 自动播放功能
2 开启定时器
3 移动端移动 使用translate移动
4 想要图片优雅的移动，添加过渡效果
*/
//获取元素
var focus = document.querySelector('.focus')
var ulEle = focus.children[0]
//获取focus的宽度
var w = focus, offsetWidth
console.log(w, 'w')
//利用定时器自动轮播图片
var index = 0;
var timer = setInterval(function () {
index++
var translatex = -index * w
ulEle.style.transform = 'all .3s'
ulEle.style.transform = 'translateX(' + translatex + 'px'
}, 2000)
/*
1 自动播放功能 无缝滚动
我们判断要等到图片滚动完毕再去判断，就是过渡完成后判断
此时需要添加检测过渡完成事件 transitionend
判断条件：如果索引号等于3 说明使最后一张图片，此时索引号要复原0 此时图片去掉过渡效果，然后移动
如果索引号小于0 说明是倒着走
此时图片，去掉过渡效果，然后移动
*/
ulEle.addEventListener('transitionend', function () {
if (index == 3) {
index = 0
//去掉过渡效果让我们的ulEle快速地跳到目标位置，然后移动
ulEle.style.transition = 'none'
// 利用最新的索引号乘以宽度 移动图片
ulEle.style.transform = 'translateX(' + translatex + 'px'
} else if (index < 0) {
index = 2
ulEle.style.transform = 'translateX(' + translatex + 'px)'
}
})
classList属性
classList属性是HTML5新增的一个属性，返回元素的类名，但是ie10以上版本支持
该属性用于在元素中添加，移除以及切换css类
注意：以下方法里面所有类名都不带点
添加类
element.classList.add('类名')
移除类
element.classList.remove('类名')
切换类
element.classList.toggle('类名')
手机端banner
/*
1 自动播放功能
2 开启定时器
3 移动端移动 使用translate移动
4 想要图片优雅的移动，添加过渡效果
*/
//获取元素
var focus = document.querySelector('.focus')
var ulEle = focus.children[0]
var olEle = focus.children[1]
//获取focus的宽度
var w = focus, offsetWidth
console.log(w, 'w')
//利用定时器自动轮播图片
var index = 0;
var timer = setInterval(function () {
index++
var translatex = -index * w
ulEle.style.transform = 'all .3s'
ulEle.style.transform = 'translateX(' + translatex + 'px'
}, 2000)
/*
1 自动播放功能 无缝滚动
我们判断要等到图片滚动完毕再去判断，就是过渡完成后判断
此时需要添加检测过渡完成事件 transitionend
判断条件：如果索引号等于3 说明使最后一张图片，此时索引号要复原0 此时图片去掉过渡效果，然后移动
如果索引号小于0 说明是倒着走
此时图片，去掉过渡效果，然后移动
*/
ulEle.addEventListener('transitionend', function () {
if (index >= 4) {
index = 0
//去掉过渡效果让我们的ulEle快速地跳到目标位置，然后移动
ulEle.style.transition = 'none'
// 利用最新的索引号乘以宽度 移动图片
ulEle.style.transform = 'translateX(' + translatex + 'px'
} else if (index < 0) {
index = 2
ulEle.style.transform = 'translateX(' + translatex + 'px)'
/*
小圆点跟随变化效果
把ol里面带有current类名选出来，去掉类名
让当前索引号的小li加上current
过渡结束以后变化，小圆点的变化要写在transitionend事件里面
*/
}
olEle.querySelector('.current').classList.remove('current')
olEle.children[index].classList.add('current')
})
/*
手指滑动轮播图
本质就是ul跟随手指移动，就是移动端拖动元素
触摸元素 touchstart 获取手指初始坐标
移动手指 touchmove 计算手指的滑动距离 并且移动盒子
离开手指 touchend 根据滑动距离分不同情况
如果移动距离小于某个像素 就回弹原来的位置
如果移动距离大于某个像素 就上一张下一张滑动
滑动分左滑动和右滑动，判断标准是移动距离正负 负值就是左滑 反之就是右滑
左滑就播放下一张 index++
右滑就播放上一张 index--
*/
// 获取手指初始坐标
var startX = 0
var moveX = 0
ulEle.addEventListener('touchstart', function (e) {
startX = e.targetTouches[0].pageX
//停止定时器
clearInterval(timer)
})
//移动手指 touchmove 计算手指的滑动距离 移动盒子
ulEle.addEventListener('touchmove', function () {
moveX = e.targetTouches[0].pageX - startX
//移动盒子 盒子原来的位置+手指移动的距离
var translateX = -index * w + moveX
//手指拖动时，动画效果要取消 过渡
ulEle.style.transition = 'none'
ulEle.style.transform = 'translateX(' + translatex + 'px)'
e.preventDefault() //阻止滚动屏幕的行为
})
//手指离开，根据移动距离，去判断时回弹还是播放上一张 下一张
ulEle.addEventListener('touchend', function (e) {
if (Math.abs(moveX) > 50) {
// 如果是右滑 就是播放上一张 moveX是正值
if (moveX > 0) {
index--
} else {
// 左滑就是播放下一张 mooveX是正值
index++
}
} else {
//移动距离小于50px我们就回弹
var translatex = -index * w
ulEle.style.transition = 'all .3s'
ulEle.style.transform = 'translateX(' + translatex + 'px)'
}
//手指离开时 重新开启定时器
clearInterval(timer)
timer == setInterval(function () {
index++
var translatex = -index * w
ulEle.style.transform = 'all .3s'
ulEle.style.transform = 'translateX(' + translatex + 'px'
}, 2000)
})
标签：index,style,手指,ulEle,819,var,移动 来源： https://www.cnblogs.com/mengxiaoye/p/16606887.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。