弹幕从右边往左边跑
<!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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 800px;
height: 500px;
margin: 40px auto;
background-color: #ddd;
}
#content{
height: 450px;
position: relative;
overflow: hidden;
}
#content > img{
height: 450px;
width: 800px;
}
#send{
display: flex;
height: 50px;
}
#inp{
flex:1;
}
#btn{
width: 100px;
}
.danmu{
position: absolute;
left: 800px;
display: flex;
white-space: nowrap;
align-items: center;
color: #949c1e;
font-weight: bold;
}
.danmu img{
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 6px;
}
</style>
</head>
<body>
<div id="box">
<div id="content">
<img src="./7.jpg" alt="">
<!-- <p class="danmu">
<img src="./7.jpg" alt="">
<span>弹幕内容</span>
</p> -->
</div>
<div id="send">
<input type="text" id="inp">
<input type="button" id="btn" value="send">
</div>
</div>
<script>
btn.onclick = function() {
if(!inp.value) return
createDanMu(inp.value)
}
function createDanMu(suibian) {
var oP = document.createElement('p') ;
oP.className = 'danmu' ;
oP.innerHTML = `
<img src="./7.jpg" alt="">
<span>${suibian}</span>
`
// 插入节点之后才能获取到样式
content.appendChild(oP);
var max = content.clientHeight - oP.offsetHeight ;
console.log(content.clientHeight);
console.log(oP.offsetHeight);
oP.style.top = parseInt(Math.random() * max) + 'px' ;
move(oP , 7 , -oP.offsetWidth , 'left' , function() {
oP.remove()
})
}
function move(ele , speed , end , prop , cb ) {
// 获取初始位置
var start = parseInt(getStyle( ele , prop)) ;
// 速度
speed = (end > start) ? speed : -speed ;
var t = setInterval(function(){
start += speed ;
ele.style[prop] = start + 'px' ;
if(Math.abs(start - end) < Math.abs(speed)) {
clearInterval(t) ;
// 防止运动过头
start = end ;
ele.style[prop] = start + 'px' ;
// 运动结束之后做其他事情 -- 调用
// if(cb) {
// cb()
// }
cb && cb()
}
},20)
}
function getStyle(ele , prop) {
if(window.getComputedStyle) {
return getComputedStyle(ele)[prop]
}
return ele.currentStyle[prop]
}
</script>
</body>
</html>
