轮播图是各大主流app必不可少的一个组件，常见应用在banner图及滑动菜单等方面。写这篇文章目的是尝试培养从一个点讲到一个面的思维方式。
移动端的触摸事件
移动端的触摸事件和pc端的触摸事件很像。
pc端是mousedown 、mousemove、 mouseup
移动端是touchstart、touchmove、touchend
如果我们想在pc端封装一个拖拽效果，一般是这样写：
let odiv = document.getElementsByTagName("div")[0]
let disX
let disY
function fnDown (event) {
disX = event.clientX - odiv.offsetLeft
disY = event.clientY - odiv.offsetTop
document.addEventListener("mousemove", fnMove, false)
document.addEventListener("mouseup", fnUp, false)
}
function fnMove(event){
odiv.style.top = event.clientY - disY + "px"
odiv.style.left = event.clientX - disX + "px"
}
function fnUp (event) {
document.removeEventListener("mousemove", fnMove, false)
document.removeEventListener("mouseup", fnUp, false)
}
odiv.addEventListener("mousedown", fnDown, false)
或者这样子：
var oDiv = document.getElementsByTagName("div")[0]
oDiv.onmousedown=function(ev){
var disX=ev.clientX-oDiv.offsetLeft
var disY=ev.clientY-oDiv.offsetTop
document.onmousemove=function(ev){
var l=ev.clientX-disX
var t=ev.clientY-disY
oDiv.style.left=l+'px'
oDiv.style.top=t+'px'
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null
}
}
如果是移动端，我们还可以这样：
let odiv = document.getElementById("box")
let x = y = 0
odiv.addEventListener("touchstart", function(event){
let disX = event.targetTouches[0].clientX - x
let disY = event.targetTouches[0].clientY - y
console.log(disX, disY)
fnmove = function(event){
x = event.targetTouches[0].clientX - disX
y = event.targetTouches[0].clientY - disY
odiv.style.transform = translate(</span><span class="p">${</span><span class="nx">x</span><span class="p">}</span><span class="s2">px, </span><span class="p">${</span><span class="nx">y</span><span class="p">}</span><span class="s2">px)
}
fnend = function (event){
odiv.removeEventListener("touchmove", fnmove,false)
odiv.removeEventListener("touchmove", fnend,false)
}
odiv.addEventListener("touchmove", fnmove,false)
odiv.addEventListener("touchend", fnend, false)
}, false)
可能你会发现，咦，居然有个targetTouches？！之前的一篇文章（如何封装一个触摸滑屏函数？）不是说用touches吗？这两个有什么区别？
- touches:当前屏幕上所有触摸点的集合列表。
- targetTouches: 绑定事件的那个结点上的触摸点的集合列表。
另外还有一个changeTouches：
- changedTouches: 触发事件时改变的触摸点的集合。
引用一张图对以上内容进行总结
#
近期评论