<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹幕效果</title>
<link rel="stylesheet" href="../拉勾网首页/common.css">
<link rel="stylesheet" href="../拉勾网首页/reset.css">
</head>
<style>
.container{
margin-top: 40px;
}
.img{
margin: 0 auto;
width: 800px;
height: 300px;
border: 2px solid gold;
box-sizing: border-box;
background: url(./manco2.jpg) no-repeat left top /800px 300px ;
position: relative;
overflow: hidden;
}
.img span{
position: absolute;
top: 0;
left: 800px;
display: block;
overflow: hidden;
white-space: nowrap; /* 解决了出现了发送的弹幕刚进入画面时没有换行的问题 */
}
.send{
margin: 0 auto;
width: 800px;
height: 50px;
background-color: gold;
color: #fff;
font-weight: bold;
font-size: 18px;
}
.send .left{
line-height: 50px;
margin-right: 60px;
}
.send input{
font-size: 18px;
border: none;
height: 40px;
width: 400px;
margin-top: 4px;
margin-left: 50px;
border-radius: 4px;
text-indent: 1em;
}
.send .button{
cursor: pointer;
}
</style>
<body>
<div class="container">
<div class="img" id="img"></div>
<div class="send clearfix">
<input type="text" id="text" class="left">
<div id="btns" class="button left">发送</div>
<div id="btnh" class="button left">隐藏</div>
<div id="btnp" class="button left">显示</div>
</div>
</div>
<script src="./tools.js"></script>
<script>
function $(id){
return document.getElementById(id);
}
function Sendmessages(){
var oSpan = document.createElement('span');
oSpan.innerHTML = $('text').value;
$('img').appendChild(oSpan);
var spanTop = Math.floor(Math.random()*250) + 'px';
changeCss(oSpan, 'top', spanTop);
changeCss(oSpan, 'color', rC());
move(oSpan);
$('text').value = "";
}
function move(elem){
var left = changeCss(elem, 'left');
var timer = setInterval(() => {
var spanWidth = elem.offsetWidth;
if(parseInt(left) >= -spanWidth){
left = parseInt(changeCss(elem, 'left'));
changeCss(elem, 'left', left - 2 + 'px');
}else{
elem.remove();
}
}, 20);
}
function rC() {
let r = Math.floor(Math.random() * 255);
let g = Math.floor(Math.random() * 255);
let b = Math.floor(Math.random() * 255);
let rgb = `rgb(${r},${g},${b})`;
return rgb;
}
addEvent($('btns'), 'click', Sendmessages);
addEvent(document, 'keydown', function(e){
var event = e || window.event;
if(event.keyCode == 13){
Sendmessages();
}
});
</script>
</body>
</html>
效果