因为最近公司的项目上有用到图片缩放及滚动的效果,而swiper在该项目上有一些问题,所以就决定自己写一个图片的缩放和滚动效果,以及回弹效果, 用的是面向对象的方式封装的, 因为是移动端的,所以用的
touch方法,HTML结构样式先放出来
<div id="box">
<div id="mask"></div>
<div id="content">
<img src="./11.jpg" alt="">
<div>
<table>
<tr>
<th>姓名</th>
<th>手机号</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr id="tr">
<td>六六六</td>
<td>18437928787</td>
<td>18</td>
<td>女</td>
</tr>
</table>
</div>
</div>
</div>* {
padding: 0;
margin: 0;
}
body,html {
width: 100%;
height: 100%;
}
#box {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#content {
position: absolute;
top: 0;
left: 0;
}
#mask {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
}
img {
width: 100%;
display: block;
}主要的缩放和滑动区域是content盒子,所以content里面随便放什么都无所谓, 这里的mask是一个遮罩层,层级大于content, 所有事件都绑定在了mask上, 这样做是因为, 如果content里的元素又小又多, 那么当双指进行缩放时,两个手指出碰到的不是同一元素, 获取到的e.target的目标会不一样,这样就会出问题, 所以设置这样一个遮罩层
function Scroll(ele) {
this.box = document.querySelector(ele)
this.content = document.querySelector('#content')
this.mask = document.querySelector('#mask')
this.data = {
width: this.content.offsetWidth, //获取内容区域的初始宽度
height: this.content.offsetHeight, //获取内容区域的初始高度
currentWidth: this.content.offsetWidth, //获取内容区域当前宽度
currentHeight: this.content.offsetHeight, //获取内容区域当前高度
startXA: 0, //第一根手指的起始位置
startYA: 0,
endXA: 0, //第一根手指的结束位置
endYA: 0,
startXB: 0, //第二根手指的起始位置
startYB: 0,
endXB: 0, //第二根手指的结束位置
endYB: 0,
currentMultiple: 1, //当前的缩放倍数
multiple:1, //缩放倍数
positionY: 0, //在Y轴的位置
positionX: 0, //在X轴的位置
startTime: 0, //手指触碰的起始时间
endTime: 0, //手指离开的结束时间
centreX: 0, //缩放位置的X轴坐标
centreY: 0, //缩放位置的Y轴坐标
bool: false, //用来判断是否是双指操作
num: 0, //用来判断屏幕上的手指数
timer: null //定时器
}
this.mask.ontouchstart = (e) => {
this.touchBegin(e)
}
this.mask.ontouchmove = (e) => {
this.touching(e)
}
this.mask.ontouchend = (e) => {
this.touchFinish(e)
}
}当触摸事件触发时,调用touchBegin事件
Scroll.prototype.touchBegin = function(e) {
this.data.num++ //当调用这个方法时,num自增
e.preventDefault() //阻止浏览器滑动
switch (e.targetTouches.length) {
case 1:
this.data.startXA = e.targetTouches[0].pageX
this.data.startYA = e.targetTouches[0].pageY
this.data.startTime = new Date().getTime()
break
case 2:
this.data.bool = true //如果是双指操作,将bool的值置为true
this.data.startXA = e.targetTouches[0].pageX
this.data.startYA = e.targetTouches[0].pageY
this.data.startXB = e.targetTouches[1].pageX
this.data.startYB = e.targetTouches[1].pageY
this.data.centreY = Math.abs((-this.data.positionY + this.data.startYA) - (-this.data.positionY + this.data.startYB)) / 2 + (-this.data.positionY + this.data.startYA)
this.data.centreX = Math.abs((-this.data.positionX + this.data.startXA) - (-this.data.positionX + this.data.startXB)) / 2 + (-this.data.positionX + this.data.startXA)
}
}当手指滑动时, 触发touching事件
Scroll.prototype.touching = function(e) {
switch (e.targetTouches.length) {
case 1:
if(!this.data.bool) { //如果bool是false, 也就是说不是双手操作,或者刚刚结束双手操作,但只离开了一只手指
this.data.endXA = e.targetTouches[0].pageX
this.data.endYA = e.targetTouches[0].pageY
let x= this.data.endXA - this.data.startXA+this.data.positionX //content应在X轴上移动的距离
let y= this.data.endYA - this.data.startYA+this.data.positionY //content应在Y轴上移动的距离
if(this.data.currentWidth === this.data.width) { //判断当前的宽度与初始化时的宽度大小是否相等 , 如果相等,也就是说明没有进行缩放操作, 那么就只在Y轴进行移动
this.content.style.transform = "translate(0,"+y+"px) scale("+this.data.multiple+")"
} else { //否则,就在X,Y轴上进行移动
this.content.style.transform = "translate("+x+"px,"+y+"px) scale("+this.data.multiple+")"
}
}
break
case 2:
this.data.endXA = e.targetTouches[0].pageX
this.data.endYA = e.targetTouches[0].pageY
this.data.endXB = e.targetTouches[1].pageX
this.data.endYB = e.targetTouches[1].pageY
this.content.style.transformOrigin = this.data.centreX+"px "+this.data.centreY+"px" //设置缩放中心点坐标
let multipleOne = Math.sqrt(Math.pow(Math.abs(this.data.startXA - this.data.startXB),2) + Math.pow(Math.abs(this.data.startYA - this.data.startYB),2)) //获取两只手指的起始直线距离
let multipleTwo = Math.sqrt(Math.pow(Math.abs(this.data.endXA - this.data.endXB),2) + Math.pow(Math.abs(this.data.endYA - this.data.endYB),2)) //获取滑动时两只手指的直线距离
let multiple = multipleTwo / multipleOne * this.data.currentMultiple //获取放大倍数
if(multiple < 1 ) { //规定放大倍数,不能大于2且不能小于1
multiple = 1
}
if(multiple > 2 ) {
multiple = 2
}
this.data.multiple = multiple
this.content.style.transform = "translate("+this.data.positionX+"px,"+this.data.positionY+"px) scale("+this.data.multiple+")"
this.data.currentWidth = this.data.multiple * this.content.offsetWidth
this.data.currentHeight = this.data.multiple * this.content.offsetHeight
}
}手指离开时,调用touchFinish事件
Scroll.prototype.touchFinish = function(e) {
let limitTop = this.data.centreY*this.data.multiple - this.data.centreY //获取上下左右的边界值(当图片进行缩放时,边界值也会发生改变,就是缩放中心到边界的距离*缩放倍数 - 缩放中心到边界的距离)
let limitDown = (this.content.offsetHeight - this.data.centreY)*this.data.multiple - (this.content.offsetHeight - this.data.centreY)
let limitLeft = this.data.centreX*this.data.multiple - this.data.centreX
let limitRight = (this.content.offsetWidth - this.data.centreX)*this.data.multiple - (this.content.offsetWidth - this.data.centreX)
this.data.num-- //num自减
this.data.currentMultiple = this.data.multiple
let down = this.box.offsetHeight - this.content.offsetHeight
let right = this.box.offsetWidth - this.content.offsetWidth
this.data.endTime = new Date().getTime()
this.data.positionY = this.content.style.transform.slice(this.content.style.transform.indexOf(',')+1,this.content.style.transform.indexOf(')')-2)-0
this.data.positionX = this.content.style.transform.slice(this.content.style.transform.indexOf('(')+1,this.content.style.transform.indexOf(',')-2)-0
if(this.data.endTime - this.data.startTime <300 && Math.abs(this.data.startYA-e.changedTouches[0].pageY)>50) { //如果手指滑动时间小于300毫秒,并且距离大于50,则触发滑动缓冲效果
let p = (this.data.endYA-this.data.startYA) * (1/(this.data.endTime - this.data.startTime)) * 100 + this.data.positionY //缓冲的距离
this.Drop(this.content,p,this.data.positionX) //调用移动动画
}
this.data.timer = setTimeout(()=>{ //设置定时器,当手指离开200毫秒后触发边界判断
if(this.data.positionY >= limitTop ){ //如果大于上边界,调用回弹动画,再判断左右边界是否超出
this.Drop(this.content, limitTop,this.data.positionX)
setTimeout(()=> {
if(this.data.positionX >= limitLeft ){
this.Drop(this.content,limitTop,limitLeft)
}
if(this.data.positionX <= right-limitRight) {
this.Drop(this.content,limitTop,right-limitRight)
}
},200)
}
if(this.data.positionY <= -limitDown+down) {
this.Drop(this.content,-limitDown+down,this.data.positionX)
setTimeout(()=>{
if(this.data.positionX >= limitLeft ){
this.Drop(this.content,-limitDown+down,limitLeft)
}
if(this.data.positionX <= right-limitRight) {
this.Drop(this.content,-limitDown+down,right-limitRight)
}
},200)
}
if(this.data.positionX >= limitLeft ){
this.Drop(this.content,this.data.positionY,limitLeft)
}
if(this.data.positionX <= -limitRight+right) {
this.Drop(this.content,this.data.positionY,right-limitRight)
}
},200)
if(!this.data.num) { //当两只手指都离开后, 将bool设置为false
this.data.bool = false
}
}移动动画方法
Scroll.prototype.Drop = function(ele, positionY,positionX) { //移动动画方式, 传入参数是目标元素, Y轴移动距离, X轴移动距离
clearInterval(ele.timer);
ele.timer = setInterval(() => {
this.data.positionY = this.content.style.transform.slice(this.content.style.transform.indexOf(',')+1,this.content.style.transform.indexOf(')')-2)-0
this.data.positionX = this.content.style.transform.slice(this.content.style.transform.indexOf('(')+1,this.content.style.transform.indexOf(',')-2)-0
var stepY = (positionY - this.data.positionY)/10
var stepX = (positionX - this.data.positionX)/10
stepY = stepY > 0 ? Math.ceil(stepY) : Math.floor(stepY);
stepX = stepX > 0 ? Math.ceil(stepX) : Math.floor(stepX);
let longY = this.data.positionY + stepY
let longX = this.data.positionX + stepX
ele.style.transform = "translate("+longX+"px,"+longY+"px) scale("+this.data.multiple+")";
if (Math.abs(positionY - this.data.positionY) <= Math.abs(stepY) && Math.abs(positionX - this.data.positionX) <= Math.abs(stepX)) {
ele.style.transform = "translate("+positionX+"px,"+positionY+"px) scale("+this.data.multiple+")";
this.data.positionX = positionX
this.data.positionY = positionY
clearInterval(ele.timer);
}
}, 10)
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
