jQ 发弹幕功效

最新推荐文章于 2022-12-28 16:40:09 发布

裴嘉靖

最新推荐文章于 2022-12-28 16:40:09 发布

阅读量92

点赞数

分类专栏： js jQuery

本文链接：https://blog.csdn.net/peijiajing/article/details/116298117

版权

js 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

jQuery

4 篇文章 0 订阅

订阅专栏

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>视频弹幕</title>
		<link rel="stylesheet" type="text/css" href="style/index.css" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
	</head>
	<body>
		
		<div id="top">
			<div class="topContent">视频弹幕网</div>
		</div>

		<div id="screen">
			<div class="video">
			//自己引用一张图片就好
				<img src="images/01.jpg" width="1200" />
			</div>
			<div class="control">
				<input type="text" name="message" placeholder="按Enter回车键发送弹幕" />
				<span class="btn">发送</span>
			</div>
		</div>
		 

	</body>
</html>

$(function(){
	function send(){
		var $message=$("#screen .control input[name=message]");
		if($message.val()==""){
			alert("弹幕内容不得为空。");
			$message.focus();
			return false;
		}else{
			var videoHeight=$("#screen .video").height();
			var newTop=parseInt(Math.random()*videoHeight);
			var $newNode=$('<div class="message">' + $message.val() + '</div>')
			$("#screen .video").append($newNode);
			$newNode.css({
				"right":-$("#screen .video .message").last().width()+ "px",
				"top":newTop + "px"
			})
			$newNode.animate({
				"left":-$("#screen .video .message").last().width()+ "px"
			},getRandomSpeed(),function(){
				$(this).remove();
			})
			$message.val("");				
		}
	}

	$("#screen .control .btn").on("click",function(){
		send();
	})

	$(document).on("keyup",function(event){
		if(event.keyCode==13){
			send();
		}
	})

	function getRandomSpeed(){
		var min=3000;
		var max=10000;
		var speed=parseInt(Math.random()*(max-min+1))+min;
		return speed;
	}
})

CSS

*{margin:0;}
body{
	font-family: Microsoft YaHei;
	font-size: 14px;
	overflow-x: hidden;
}

a{text-decoration: none;}
a:hover{text-decoration: none;}
p{margin-bottom: 10px;}

/*top顶部*/
#top{
	width:100%; height:40px;
	line-height: 40px;
	background-color: #333333;
}
#top .topContent{
	width:1100px; height:inherit;
	margin:0 auto;
	color:#ffffff;
}

/*弹幕*/
#screen{
	width:1200px;
	margin:0 auto;
}
#screen .video{
	position: relative;
}
#screen .video div.message{
	display: inline-block;
	position: absolute;
	color:#ffffff;
	font-size: 16px;
}
#screen .control{
	height:60px;
	background-color: #333333;
	line-height: 60px;
	padding-left:10px;
}
#screen .control input[name=message]{
	width:500px; height:20px;
	text-indent: 5px;
	outline: none;
}

#screen .control .btn{
	display: inline-block;
	width:80px; height:25px;
	background-color: #ff5857;
	line-height: 25px;
	text-align: center;
	vertical-align: middle;
	margin-left:-5px;
	border-radius: 0 5px 5px 0;
	color:#ffffff;
	cursor:pointer;
}

裴嘉靖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQ 发弹幕功效

HTML<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>视频弹幕</title> <link rel="stylesheet" type="text/css" href="style/index.css" /> <script type="text/javascript" src="js/jquery.js"><
复制链接

扫一扫