jq 弹幕

最新推荐文章于 2023-11-28 17:53:15 发布

Jason–json

最新推荐文章于 2023-11-28 17:53:15 发布

阅读量126

点赞数

文章标签： jq jquery javascript css html

本文链接：https://blog.csdn.net/weixin_46146313/article/details/104176409

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../jquery-3.4.1.min.js" type="text/javascript">			
		</script>
		<style type="text/css">
			.boxs{
				height: 500px;
				width: 1350px;
				background-color:#C8CBCA ;
				position: relative;
				overflow: hidden;
				/*left: 0px;
				top: 0px;*/
			}
			.boxx{
				height: 80px;
				width: 1350px;
				background-color: #636565;
				position: absolute;
				overflow: hidden;
				/*top: 300px;
				left: 0px;*/
			}
			
			.boxleft{
				float: left;
				font-size: 30px;
				margin-left: 50px;
				color: azure;
			}
			#nr{
				background-color: white;
				height: 25px;
				line-height: 25px;
			}
			.a{
				margin-left: 700px;
				display: inline-block;
			}
			.dong{
				position: absolute;
				line-height: 22px;
				display: inline-block;
			
			}
		</style>
		
	</head>
	<body>
		<div class="box">
			<div class="boxs">
				
			</div>
			<div class="boxx">
				<div class="a">
					<div class="boxleft">发送弹幕:</div>
					<div class="boxleft"><input type="" name="" id="nr" value="" /></div>
					<div class="boxleft"><button class="fs">发送</button></div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			
			$(function(){
				$('.fs').click(function(){
					//获取value值
					var $value=$('#nr').val();
					//创建
					var $p=$("<span class='dong'>"+$value+'</span>')					
					$p.appendTo($('.boxs'))					
					var $shuji=parseInt(Math.random()*500);
					//还可以定义随机函数加入随机色
					//用变调用量来这样每次出来的高度都不一样；
					$p.css({
						"width":'500px',
						'height':'22px',
						'left':'1400px',
						'fontSize':'30px',
						'top':$shuji,

					},20000).animate({
					'left':'-400px',
					},20000,function(){
						$(this).remove()
					})	
				})
			})
		</script>	
	</body>
</html>