h5手指滑动划线touch事件

最新推荐文章于 2023-12-02 01:18:41 发布

judy_1118

最新推荐文章于 2023-12-02 01:18:41 发布

阅读量994

点赞数

分类专栏： h5 文章标签： html5 js

本文链接：https://blog.csdn.net/judykang123/article/details/108888010

版权

h5 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

效果

首先我们来看下效果：
在这里插入图片描述

连线说明

① 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端请用鼠标事件

judy_1118

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
h5手指滑动划线touch事件

目录准备连线说明HTMLCSSJS首先我们来看下效果：准备我的这个连线是在750*1206的垂直居中的盒子里面写的连线说明①clientY的值 = top_1206+心外框的top:462+各个点的top ~ top_1206+心外框的top:462+各个点的top+各个点的高20 ,时是连线②clientX的值 = 心外框的left:110+各个点的left ~ 心外框的left:110+各个点的left+各个点的宽20 ,时是连线③每连上一条线，heart_line的数值就会
复制链接

扫一扫