master

分支 (1)

管理

管理

master

front-end-method-tool-set
/
bullet.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			.wap-content {
				position: relative;
				width: 1000px;
				height: 800px;
				margin: 50px auto;
				border: 1px solid #d0c9c9;
			}

			.video_content {
				margin: 30px 25px;
				overflow: hidden;
			}
			#video-wrap {
				width: 600px;
				height: 400px;
				background-color: rgba(0, 0, 0, 0.5);
				float: left;
				position: relative;
				overflow: hidden;
			}
			.track {
				color: #fff;
                background-color: #000000;
				width: fit-content;

				font-size: 14px;
				/* 这里设置的hang高 */
				line-height: 40px;

				position: absolute;
				right: 0px;
				top: 20px;
                /* animation:barrage 5s linear 0s; */
                /* opacity: 0; */
			}
            @keyframes barrage {
                0% {
                    left:100%;
                    opacity: 1;
                    /* transform:translateX(100%); */
                    /* transform:translate3d(0,0,0); */
                }
                90% {
                    opacity: 1;
                    /* transform:translateX(0); */
                    /* transform:translate3d(-100%,0,0); */
                }
                100% {
                    left:0;
                    /* transform:translateX(0); */
                    /* transform:translate3d(-100%,0,0); */
                }
            }
			.scroll-wrap{
				width: 300px;
				height: 400px;
				float: left;
				border: 1px solid #171C19;
				margin-left: 40px;
				position: relative;
			}

			.input-wrap {
				text-align: center;
			}

			.input_text {
				outline: none;
				border: 1px solid #d2cccc;
				width: 600px;
				height: 40px;
				font-size: 14px;
				color: #000000;
				padding: 0 15px;
				border-radius: 5px;
			}

			input:focus {
				border-color: #409eff;
			}

			#btn {
				color: #fff;
				width: 100px;
				height: 40px;
				border: 1px solid #409eff;
				background-color: #409eff;
				vertical-align: middle;
				font-size: 16px;
				border-radius: 5px;
				cursor: pointer;
			}
			ul {
				/* border: 1px solid red; */
				width: 100%;
				max-height: 600px;
				overflow-y: auto;
				padding: 0 15px 15px 15px;
				position: absolute;
				bottom: 0;
				left: 0;
			}
			ul::-webkit-scrollbar {
			    display: none;
			}
			.li{
				margin-top: 10px;
				font-size: 14px;
				color: #000000;
				list-style-type: none;
			}
		</style>
	</head>
	<body>
		<div class="wap-content">
			<div class="video_content">
				<!-- 视频播放 弹幕区域 -->
                <div id="video-wrap">
                    <video width="100%" height="100%" src="./image/test.mp4"></video>
                </div>

				<!-- 右侧聊天区域 -->
				<div class="scroll-wrap">
					<ul id="ui-id">

                    </ul>
				</div>
			</div>
			<!-- 文本输入区域 -->
			<div class="input-wrap">
				<input type="text" class="input_text" maxlength="30" placeholder="请输入要发送的弹幕" id="input-id">
				<button type="button" id="btn">发送</button>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		let inputText = document.getElementById("input-id");
		let ulContent = document.getElementById("ui-id");
		let videoView = document.getElementById("video-wrap");

		let videoWidth = videoView.offsetWidth; //视频播放区域的总宽度
		let listHeight = videoView.offsetHeight/10;
		let trackNum = [0,1,2,3,4,5,6,7,8,9];

		document.getElementById("btn").addEventListener("click",function(){
			let value = inputText.value;//获取输入框的值
			if(!value) return;
            //将输入框的值插入到滚动聊天中
			appendToUlDom(value);
            //将输入框的值插入到弹幕中
			videoBulletDom(value);
            //清空输入框
			inputText.value = '';
			ulContent.scrollTop = ulContent.scrollHeight;//自动滚动到底部
		})
		//将输入框的值插入到聊天中
		function appendToUlDom(content){
			let li = document.createElement("li");
			li.setAttribute("class","li");
			li.innerHTML = content;
			ulContent.appendChild(li);
		}

		let speedArr = ['normal','fast','faster'];

		//将输入框的值插入到弹幕中
		function videoBulletDom(content){
			// 放入第几个轨道  随机获取
		    let currentTrack = trackNum[Math.floor((Math.random()*trackNum.length))];
			let p = document.createElement("p");
			p.setAttribute("class","track");
			p.style.top = (currentTrack * 40) + "px";
			p.style.left = videoWidth + "px";
			p.innerHTML = content;
			videoView.appendChild(p);
			// 定义速度  随机获取
			let speed = speedArr[Math.floor((Math.random()* speedArr.length))];
			Animate(p, speed);//滚动动画
		}
		let speedType = {
			'normal':5,
			'fast':10,
			'faster':15
		}
		function Animate(dom,speed){ //滚动动画
			let domWidth = dom.offsetWidth; //当前弹幕元素的宽度
			let distance = videoWidth;//视频区域的总宽度
			speed ? speed : 'normal';
			let interval = speedType[speed]

			let timer = setInterval(function(){
				distance -= interval;
				dom.style.left = distance + 'px';
				if(distance <= -domWidth){
					clearInterval(timer);
					videoView.removeChild(dom);
				}
			},50)

		}
	</script>
</html>