公司要开发一个切绳子的活动项目,于是开始尝试,开始使用原生touchmove记录坐标然后设置判定条件触发,但是后面发现一个bug,当我们切得很快的时候,浏览器记录的坐标并不是按照我们理想的1px 1px的记录,而是会跳过,类似 140 170 180 185这种,然后会将我们的判断条件跳过去不触发,后面想了很久,决定采用记录坐标,放在数组里面,通过每次前后两个坐标值是否在绳子区间内做判定,效果非常好····上代码吧
/*css样式*/
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
overflow: hidden;
}
.prize {
position: relative;
margin-top: 50px;
width: 100%;
height: 50rem;
overflow: hidden;
}
.giftmain {
position: relative;
}
.rope {
height: 200px;
width: 4px;
background: red;
margin: 0 auto;
position: absolute;
left: 50%;
margin-left: -1px;
z-index: 999;
}
.gift {
height: 40px;
width: 40px;
background: red;
position: absolute;
margin-left: -20px;
left: 50%;
top: 200px;
z-index: 999;
}
html 结构
<div class="prize">
<div class="giftmain">
<div class="rope"></div>
<div class="gift"></div>
</div>
</div>
接下来是最重要的js
var arrX=[];
var arrY=[];
var flags=true;//这是一个开关,使元素跌落最底部才能再次触发,否则效果会很神奇··
$(document).on('touchstart',function(e){
e.preventDefault()
var startx=event.changedTouches[0].clientX;
$(document).on('touchmove',function(e){
e.preventDefault()
if(flags){
var X=event.changedTouches[0].clientX;
var Y=event.changedTouches[0].clientY;
//console.log($(document).width())
var width=$(document).width()
var height=$('.rope').height()
var leftX=width/2-2;
var rightX=width/2+2;
var topY=0;
var bottomY=height;
arrX.push(X);//将每次记录的坐标放入数组
arrY.push(Y);
for(var i=0;len=arrX.length,i<len;i++){
if(flags){
var l=arrX.length
var t=arrY.length;
var pa=arrX[l-4]>arrX[l-1]?'left':'right';
if(((arrX[l-2]<=rightX&&arrX[l-1]>=rightX)||(arrX[l-2]>=leftX&&arrX[l-1]<=leftX))&&(arrY[t-1]<=(height+50)&&arrY[t-2]>=50)){
var dev=$('<div class="giftmain_copy"><div class="rope_copy"></div><div class="gift_copy"></div></div>');
$('.giftmain').stop().animate({top: '1000px','opacity':'-=1.8'}, 500,function(){
$('.giftmain').css('top','0px')
$('.giftmain').css('opacity','1')
flags=false;
})
flags=true;
$('.prize').css('top','0px')//元素回到原位 清空数组
console.log(arrX[l-1])
arrX=[];
arrY=[];
return
}
}
}
}
})
})