东坡肉核心代码

最新推荐文章于 2024-08-17 12:54:01 发布

qq_45370222

最新推荐文章于 2024-08-17 12:54:01 发布

阅读量117

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_45370222/article/details/127461760

版权

触摸事件页面切换音乐播放 CSS动画 JavaScript

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			html, body {
				height: 100%;
				overflow: hidden;
			}
			
			* {
				margin: 0;
				padding: 0;
			}
			.outer1, .outer2, .outer3, .outer4 {
				position: relative;
				height: 100%;
				display: none;
			}
			
			.outer1 {
				display: block;
				background: url(img/p2back.png) 0 0/100% no-repeat;
			}
			.music_img {
				position: absolute;
				top: 20px;
				right: 20px;
				z-index: 90;
				animation: zhuan360 1s linear  infinite paused;
			}
		
			@keyframes zhuan360{
				from{
					transform: rotate(0deg);
				}
				to{
					transform: rotate(360deg);
				}
			}
		</style>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<img class="music_img" src="img/yinyue.png"/>
		<audio class="music" src="media/lalala.mp3" loop="loop"></audio>
		<div class="outer1">1</div>
		<div class="outer2">2</div>
		<div class="outer3">3</div>
		<div class="outer4">4</div>
		
	</body>
</html>

<script type="text/javascript">
	var outer1 = document.querySelector(".outer1");
	var outer2 = document.querySelector(".outer2");
	var outer3 = document.querySelector(".outer3");
	var outer4 = document.querySelector(".outer4");
	
	var start = 0, end = 0, juli = 0;
	
	outer1.addEventListener("touchstart", function() {
		start = event.targetTouches[0].clientY;
		console.log(start, "按下");
	});
	
	outer1.addEventListener("touchend", function() {
		end = event.changedTouches[0].clientY;
		
		console.log(end, "抬起");
		
		juli = start - end;
		if (juli > 150) {
			outer1.style.display = "none";
			outer2.style.display = "block";
		}
	});
	
	outer2.addEventListener("touchstart", function() {
		start = event.targetTouches[0].clientY;
		console.log(start, "按下");
	});
	
	outer2.addEventListener("touchend", function() {
		end = event.changedTouches[0].clientY;
		console.log(end, "抬起");
		
		juli = start - end;
		if (juli > 150) {
			outer2.style.display = "none";
			outer3.style.display = "block";
		}
		
		if (juli < -150) {
			outer1.style.display = "block";
		}
	});
	
	
	outer3.addEventListener("touchstart", function() {
		start = event.targetTouches[0].clientY;
		console.log(start, "按下");
	});
	
	outer3.addEventListener("touchend", function() {
		end = event.changedTouches[0].clientY;
		console.log(end, "抬起");
		
		juli = start - end;
		if (juli > 150) {
			outer3.style.display = "none";
			outer4.style.display = "block";
		}
		
		if (juli < -150) {
			outer2.style.display = "block";
		}
	});
	
	outer4.addEventListener("touchstart", function() {
		start = event.targetTouches[0].clientY;
		console.log(start, "按下");
	});
	
	outer4.addEventListener("touchend", function() {
		end = event.changedTouches[0].clientY;
		console.log(end, "抬起");
		
		juli = start - end;
		
		if (juli < -150) {
			outer3.style.display = "block";
		}
	});
	
	
	
	/*音乐事件*/
	var music = document.querySelector(".music");
	var music_img = document.querySelector(".music_img");
	var zhuangti = false;
	
	music_img.onclick = function() {
		if (zhuangti == false) {
			music_img.style.animationPlayState = "running";
			music.play();
			zhuangti = true;
		}
		else {
			music_img.style.animationPlayState = "paused";
			music.pause();
			zhuangti = false;
		}
		
	}
	
</script>