<!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>
07-09
2155
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)