<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 500px;
height: 600px;
margin: 100px auto;
}
.video {
width: 500px;
height: 500px;
position: relative;
display: flex;
align-items: center;
}
.video img {
width: 100%;
height: 100%;
}
.botom {
width: 100%;
height: 100px;
display: flex;
}
.botom .input {
flex: 1;
/* height: 100px; */
}
.botom button {
height: 100%;
}
.video p {
position: absolute;
left: 100%;
display: flex;
align-items: center;
}
.video p img {
width: 50px;
height: 50px;
border-radius: 50%;
}
.video p span {
display: block;
margin-left: 10px;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="container">
<div class="video">
<img class="vdimg" src="../images/3.jpg" alt="">
<!-- <p>
<img src="../images/3.jpg" alt="">
<span>弹幕内容</span>
</p> -->
</div>
<div class="botom">
<input type="text" class="input">
<button class="btn">发送</button>
</div>
</div>
<script>
var ocontainer = document.querySelector('.container')
var ovideo = document.querySelector('.video')
var obtn = document.querySelector('.btn')
var oinput = document.querySelector('.input')
obtn.onclick = function () {
var msg = oinput.value
if (msg) {
create(msg)
}
}
//生成弹幕
function create(msg) {
var op = document.createElement('p')
op.innerHTML = `
<img src="../images/3.jpg" alt="">
<span>${msg}</span>
`
ovideo.appendChild(op)
var maxY = ovideo.clientHeight - op.offsetHeight
var x = random(0, maxY)
op.style.cssText = `top:${x}px`
move(-op.offsetWidth, op, 'left', 21, function () {
op.remove()
})
}
function random(min, max) {
return parseInt(Math.random() * (max - min) + min)
}
function move(end, ele, attr, speed, fb) {
var sta = parseInt(getStyle(ele, attr))
var speed = end > sta ? speed : -speed
var t = setInterval(function () {
sta += speed
ele.style[attr] = sta + 'px'
if (Math.abs(end - sta) < Math.abs(speed)) {
sta = end
ele.style[attr] = sta + 'px'
clearInterval(t)
if (fb) {
fb()
}
}
}, 100)
}
function getStyle(ele, attr) {
if (window.getComputedStyle) {
return getComputedStyle(ele)[attr]
} return ele.currentStyle[attr]
}
</script>
</body>
</html>
