147 lines
2.7 KiB
HTML
147 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Title</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
height: 100vh;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.hb {
|
|
width: 50px;
|
|
height: 70px;
|
|
top: -70px;
|
|
position: absolute;
|
|
user-select: none;
|
|
}
|
|
.popup {
|
|
position: fixed;
|
|
z-index: 9999;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: rgb(0 0 0 / 58%);
|
|
display: none;
|
|
}
|
|
.popup_center {
|
|
width: 400px;
|
|
height: 250px;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
.closed {
|
|
position: absolute;
|
|
right: 15px;
|
|
top: 10px;
|
|
color: #000;
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<div class="popup">
|
|
<div class="popup_center">
|
|
<div class="closed">x</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
|
|
|
|
var height = document.body.clientHeight,
|
|
width = document.body.clientWidth,
|
|
intervalId = [], startHb = null, currentClickHb = null;
|
|
|
|
/**
|
|
* 创建红包的
|
|
* @constructor
|
|
*/
|
|
function CreatedHongBao() {
|
|
var x = parseInt(Math.random() * (width - 50));
|
|
var hb = document.createElement("img")
|
|
hb.src = "./hb.png"
|
|
hb.className = "hb"
|
|
hb.style.left = `${x}px`
|
|
hb.style.top = `-50px`
|
|
|
|
hb.onclick = function () {
|
|
currentClickHb = hb
|
|
intervalId.forEach(function (v) {
|
|
clearInterval(v.id)
|
|
})
|
|
clearInterval(startHb)
|
|
$(".popup").style.display = "block"
|
|
}
|
|
$("body").appendChild(hb)
|
|
motion(hb,x)
|
|
}
|
|
|
|
|
|
function motion(el,x) {
|
|
intervalId.push({
|
|
id: setInterval(function () {
|
|
var top = parseInt(el.style.top) + 10;
|
|
if (top > height) {
|
|
remove(el,x)
|
|
} else {
|
|
el.style.top = `${top}px`
|
|
}
|
|
},100),
|
|
|
|
cardId: x
|
|
})
|
|
}
|
|
|
|
|
|
function remove(el,x) {
|
|
try {
|
|
intervalId = intervalId.filter(function (v) {
|
|
if (v.cardId == x) {
|
|
$("body").removeChild(el)
|
|
clearInterval(v.id)
|
|
} else {
|
|
return v
|
|
}
|
|
});
|
|
} catch (e) {
|
|
|
|
}
|
|
}
|
|
|
|
function auto () {
|
|
startHb = setInterval(function () {
|
|
CreatedHongBao()
|
|
}, 1000)
|
|
}
|
|
|
|
auto()
|
|
|
|
|
|
$(".closed").onclick = function () {
|
|
var imgAll = document.querySelectorAll("img")
|
|
$(".popup").style.display = "none"
|
|
remove(currentClickHb, parseInt(currentClickHb.style.left))
|
|
|
|
imgAll.forEach(function (v) {
|
|
motion(v,parseInt(v.style.left))
|
|
})
|
|
auto()
|
|
}
|
|
|
|
|
|
function $(className) {
|
|
return document.querySelector(className)
|
|
}
|
|
|
|
|
|
</script>
|
|
</html> |