jq 弹幕

<!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>
Jason–json
发布了96 篇原创文章 · 获赞 26 · 访问量 7296
私信关注
猜你喜欢
