129 lines
2.9 KiB
HTML
129 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>弹幕</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
outline: none;
|
|
}
|
|
|
|
.main {
|
|
width: 100%;
|
|
height: 600px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background: #000;
|
|
}
|
|
|
|
.main video {
|
|
flex: 1;
|
|
height: 80%;
|
|
}
|
|
|
|
input {
|
|
height: 40px;
|
|
background: #fff;
|
|
border: none;
|
|
width: 100%;
|
|
border-bottom: 1px solid #000;
|
|
}
|
|
|
|
span {
|
|
position: fixed;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="main">
|
|
<video src="./video.mp4" muted autoplay loop controls></video>
|
|
<input type="text" placeholder="输入弹幕">
|
|
<button>满屏</button>
|
|
<button>一半</button>
|
|
<button>5分之一</button>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
<script>
|
|
|
|
var videoWrapHeight = $("video").offsetHeight;
|
|
var clientWidth = document.body.clientWidth;
|
|
//
|
|
var max = videoWrapHeight,
|
|
half = videoWrapHeight / 2,
|
|
hh = videoWrapHeight / 5;
|
|
|
|
var currentHeight = max;
|
|
|
|
$("input").onkeydown = function (e) {
|
|
if (e.keyCode == 13) {
|
|
createdText($("input").value);
|
|
$("input").value = ""
|
|
}
|
|
}
|
|
|
|
function createdText(text) {
|
|
var span = document.createElement("span");
|
|
span.innerText = text;
|
|
span.style.right = "-500px";
|
|
span.style.top = `${Math.random() * (currentHeight - 16)}px`;
|
|
|
|
$("body").appendChild(span);
|
|
|
|
span.style.right = `-${span.clientWidth}px`
|
|
span.style.width = `${span.clientWidth}px`
|
|
|
|
motion(span)
|
|
}
|
|
|
|
var change = document.querySelectorAll("button");
|
|
change.forEach((v, i) => {
|
|
v.onclick = () => {
|
|
switch (i) {
|
|
case 0:
|
|
currentHeight = max;
|
|
break;
|
|
case 1:
|
|
currentHeight = half;
|
|
break;
|
|
case 2:
|
|
currentHeight = hh
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
})
|
|
|
|
function motion(el) {
|
|
el.IntervalId = setInterval(() => {
|
|
var offset = parseInt(el.style.right) + 1;
|
|
if (offset > clientWidth) {
|
|
clearInterval(el.IntervalId)
|
|
$("body").removeChild(el)
|
|
} else {
|
|
el.style.right = `${offset}px`
|
|
}
|
|
}, 10);
|
|
}
|
|
|
|
|
|
function $(className) {
|
|
return document.querySelector(className)
|
|
}
|
|
</script>
|
|
|
|
</html> |