h5手指滑动划线touch事件

效果

首先我们来看下效果：

连线说明

① box_1206是一个宽750px，高1206px的盒子，垂直居中，一般来说内容都可以写在这里面

②判断手指滑动到指定范围，需要满足：

手指滑动位置的y轴坐标与浏览器的顶部的距离clientY的值 = 【box_1206距离页面顶部的长度(在这里是top_1206)+心外框到box_1206的top:462+心各个点的top】 ~【 top_1206+心外框的top:462+各个点的top+各个点的高20时是连线】

手指滑动位置的x轴坐标与浏览器的左边的距离clientX的值 = 【心外框的left:110+各个点的left 】 ~【心外框的left:110+各个点的left+各个点的宽20 时是连线】

如果想要触发范围变大，需要在x、y坐标范围开始的数值减去一个数，结束的数值加上一个数

③每连上一条线，自定义的heart_line的数值就会变化，初始为0，第一条成功为1，以此类推。
下一条线连上的前提是上一条连接好了，即除了第一条线，每个都是有一个if前提

④在松手touchend时，

如果heart_line == 4，即左边线连完，背景就保持左边成功的样子

如果heart_line == 8，即整颗心都连好，则心淡出，进行下一步

如果heart_line为其他数值，说明中途断了，背景回到最初，heart_line = 0；

HTML

注释：

page_three是最大的满屏的手机页面，
box_1206是一个宽750，高1206的盒子，垂直居中
heart_box是心的盒子，划线的点和线都写在这里面
heart_gif是一个gif图，在画心之前用来展示步骤的，没有可不写
heart_point是画心的点（白色点点）

<div class="page page_three"><div class="box_1206"><div class="heart_box"><div class="heart_gif"></div><div class="heart_point heart_point1"></div><div class="heart_point heart_point2"></div><div class="heart_point heart_point3"></div><div class="heart_point heart_point4"></div><div class="heart_point heart_point5"></div><div class="heart_point heart_point6"></div><div class="heart_point heart_point7"></div><div class="heart_point heart_point8"></div></div><!-- /心连线 --></div></div>

CSS

注释：

图片需要自己修改对应的路径
page3_heart.png是一张雪碧图，里面是画心背景的各个阶段，在划线途中根据划线的进度改变背景图片位置（如下图）
heart_gif是一个gif图，在画心之前用来展示步骤的，没有可不写
heart_point是画线时需要连接的点（白色点点），每个点都有指定的位置
heart_point_light是点点的外发光属性，连接上哪个点哪个点就亮，做指示作用

/*连线的页面----------------------------------------------------------------*//*背景图片*/
.page_three {position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;background: url('../img/back_3.jpg') no-repeat;background-size: 100% 1496px;
}
.heart_box{position: absolute;left: 110px;top: 462px;width: 529px;height: 451px;background: url('../img/page3_heart.png') no-repeat;background-position: -1180px -952px;
}
.heart_gif{position: absolute;left: 0;top: 0;width: 529px;height: 451px;background: url('../img/page3_heart.gif') no-repeat;
}
.heart_point{width: 20px;height: 20px;background: #fff;border-radius: 100%;
}
.heart_point_light{-moz-box-shadow:0px 0px 30px 10px #fffcec;; -webkit-box-shadow:0px 0px 30px 10px #fffcec;; box-shadow:0px 0px 30px 10px #fffcec;;
}
.heart_point1{position: absolute;left: 253px;top: 106px;
}
.heart_point2{position: absolute;left: 82px;top: 27px;
}
.heart_point3{position: absolute;left: 16px;top: 187px;
}
.heart_point4{position: absolute;left: 136px;top: 326px;
}
.heart_point5{position: absolute;left: 253px;top: 420px;
}
.heart_point6{position: absolute;left: 425px;top: 27px;
}
.heart_point7{position: absolute;left: 494px;top: 187px;
}
.heart_point8{position: absolute;left: 371px;top: 326px;
}

JS

注释：

heart_line 判断连接到第几个点上，初识为0，每连上一个点就改变heart_line 的值，如果连线断掉就再设置heart_line 为0，重新开始
因为本次要求是从上面中间的点开始连线，所以touch事件绑定的元素是heart_point1
里面touchX和touchY的范围在连线说明里面有解释

let heart_line = 0;
let heart_point1 = document.getElementsByClassName('heart_point1')[0];heart_point1.addEventListener('touchmove', function(e) {let touchX = parseFloat(e.touches[0].clientX); //途经的点的x坐标let touchY = parseFloat(e.touches[0].clientY); //途经的点的y坐标// console.log('touchX ： ' + touchX);// console.log('touchY ： ' + touchY);$('.heart_point1').addClass('heart_point_light');if (touchX >= (110+82) && touchX <= (110+82+20) && touchY >= (top_1206+462+27) && touchY <= (top_1206+462+27+20)) {console.log('左边第一条线');heart_line = 1;$('.heart_point2').addClass('heart_point_light');$('.heart_box').css({'backgroundPosition':'-10px -10px'});}if (touchX >= (110+16) && touchX <= (110+16+20) && touchY >= (top_1206+462+187) && touchY <= (top_1206+462+187+20) && heart_line == 1) {console.log('左边第2条线');heart_line = 2;$('.heart_point3').addClass('heart_point_light');$('.heart_box').css({'backgroundPosition':'-559px -10px'});}if (touchX >= (110+136) && touchX <= (110+136+20) && touchY >= (top_1206+462+326) && touchY <= (top_1206+462+326+20) && heart_line == 2) {console.log('左边第3条线');heart_line = 3;$('.heart_point4').addClass('heart_point_light');$('.heart_box').css({'backgroundPosition':'-10px -481px'});}if (touchX >= (110+253) && touchX <= (110+253+20) && touchY >= (top_1206+462+420) && touchY <= (top_1206+462+420+20) && heart_line == 3) {console.log('左边第4条线');heart_line = 4;$('.heart_point5').addClass('heart_point_light');$('.heart_box').css({'backgroundPosition':'-559px -481px'});}if (touchX >= (110+425) && touchX <= (110+425+20) && touchY >= (top_1206+462+27) && touchY <= (top_1206+462+27+20) && heart_line == 4) {console.log('右边第1条线');heart_line = 5;$('.heart_point6').addClass('heart_point_light');$('.heart_box').css({'backgroundPosition':'-1108px -10px'});}if (touchX >= (110+494) && touchX <= (110+494+20) && touchY >= (top_1206+462+187) && touchY <= (top_1206+462+187+20) && heart_line == 5) {console.log('右边第2条线');heart_line = 6;$('.heart_point7').addClass('heart_point_light');$('.heart_box').css({'backgroundPosition':'-1108px -481px'});}if (touchX >= (110+371) && touchX <= (110+371+20) && touchY >= (top_1206+462+326) && touchY <= (top_1206+462+326+20) && heart_line == 6) {console.log('右边第3条线');heart_line = 7;$('.heart_point8').addClass('heart_point_light');$('.heart_box').css({'backgroundPosition':'-10px -952px'});}if (touchX >= (110+253) && touchX <= (110+253+20) && touchY >= (top_1206+462+420) && touchY <= (top_1206+462+420+20) && heart_line == 7) {console.log('右边第4条线');heart_line = 8;$('.heart_box').css({'backgroundPosition':'-559px -952px'});}});heart_point1.addEventListener('touchend', function(e) {if (heart_line == 4) {console.log('左边完成，开始右边');$('.heart_point1,.heart_point2,.heart_point3,.heart_point4,.heart_point5').addClass('heart_point_light');$('.heart_point6,.heart_point7,.heart_point8').removeClass('heart_point_light');$('.heart_box').css({'backgroundPosition':'-559px -481px'});} else if (heart_line == 8) {console.log('右边完成，心淡出，文字出现');$('.heart_point').addClass('heart_point_light');$('.heart_box').css({'backgroundPosition':'-559px -952px'});$('.heart_box').fadeOut().fadeIn().fadeOut().fadeIn().fadeOut('slow');$('.page3_txt').show();$('.page3_txt_detail1').delay(2300).fadeIn();$('.page3_txt_detail2').delay(3000).fadeIn();$('.page3_txt_detail3').delay(4000).fadeIn();$('.page3_back_people').delay(5000).fadeIn();$('.btn_goon').delay(6000).fadeIn();$('.page3_btn_txt').delay(6000).fadeIn();} else {console.log('哎呀，断掉啦~');heart_line = 0;$('.heart_point').removeClass('heart_point_light');$('.heart_box').css({'backgroundPosition':'-1180px -952px'});}});

这样就完成啦~
需要注意的是touch事件针对于移动端，如果是PC端请用鼠标事件

h5手指滑动划线touch事件相关推荐

H5移动页面的touch事件与点击穿透问题
先举一个例子: <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
轮番滑动PHP,touch事件之滑动判断（左右上下方向）
touch事件之滑动判断(左右上下方向) 作者: 2020.03.11 本文发布于18天前分类: $("body").on("touchstart", fun ...
Android 模拟滑动 MotionEvent touch事件
模拟android里touch事件的滑动,适用于recyclerview等. 通过发送MotionEvent来模拟touch事件,配合ValueAnimator控制滑动的时间,也可以加入差值器等,之所 ...
Andriod 从源码的角度详解View,ViewGroup的Touch事件的分发机制
转载请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/21696315),请尊重他人的辛勤劳动成果,谢谢! 今天这篇 ...
Android Touch事件传递
touch翻译为接触,触摸.我们今天要聊的就是摸的事件. 在Android中了解了Touch事件可以帮助我们解决,ScrollView嵌套ListView,GridView,viewPager滑动冲突 ...
搞定移动端一(移动端 touch 事件，TouchEvent 对象)
移动端事件 1.目标掌握移动端 touch 事件使用掌握 touch 事件和 mouse 事件的区别掌握 touchEvent 实现移动端幻灯片 2.移动端touch事件 touchstart ...
移动端touch事件---利用bootstrap实现轮播图手指左右滑动事件
还记的我上篇文章实现了图片响应式滑动,如果不知道怎样实现图片在超宽屏幕居中显示,且也不知道怎样实现图片的响应式效果(专门针对移动端的),可以再继续看看我写的这篇文章.狠狠地点击这里那么针对移动端,如 ...
QT：触摸屏支持手指触摸，增加touch事件touchevent，记录前后touch坐标并处理
QT:触摸屏支持手指触摸,增加touch事件touchevent,记录前后touch坐标并处理 1.手指触摸事件当做鼠标事件去响应的可行性 2.触摸事件touchEvent的添加 3.重写touch事 ...
H5案例分享：移动端滑屏 touch事件
移动端滑屏 touch事件移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch ...

h5手指滑动划线touch事件

目录

效果

连线说明

HTML

CSS

JS

h5手指滑动划线touch事件相关推荐

最新文章

热门文章