弹幕

最新推荐文章于 2021-01-07 07:30:09 发布

BlogChat

最新推荐文章于 2021-01-07 07:30:09 发布

阅读量181

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_39134861/article/details/79720666

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

//弹幕

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.8.3.min.js"></script>
  <style type="text/css">
    html, body {
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;
      font-family: "微软雅黑";
      font-size: 62.5%;
    }
    
    .boxDom {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }
    
    .idDom {
      width: 100%;
      height: 100px;
      background: #666;
      position: fixed;
      bottom: 0px;
    }
    
    .content {
      display: inline-block;
      width: 430px;
      height: 40px;
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
      margin: auto;
    }
    
    .title {
      display: inline;
      font-size: 4em;
      vertical-align: bottom;
      color: #fff;
    }
    
    .text {
      border: none;
      width: 300px;
      height: 30px;
      border-radius: 5px;
      font-size: 2.4em;
    }
    
    .btn {
      width: 60px;
      height: 30px;
      background: #f90000;
      border: none;
      color: #fff;
      font-size: 2.4em;
    }
    
    span {
      width: 300px;
      height: 40px;
      position: absolute;
      overflow: hidden;
      color: #000;
      font-size: 4em;
      line-height: 1.5em;
      cursor: pointer;
      white-space: nowrap;
    }
  
  </style>
</head>

<body>

<div class="boxDom" id="boxDom">
  <div class="idDom" id="idDom">
    <div class="content">
      <p class="title">吐槽:</p>
      <input type="text" class="text" id="text"/>
      <button type="button" class="btn" id="btn">发射</button>
    </div>
  </div>
</div>
	</body>
	<script>
		$(function(){
			var colors=["red","green",,"hotpink", "pink", "cyan", "yellowgreen", "purple", "deepskyblue"];
			$("#btn").click(function(){
				//获取随机颜色
				//获取随机纵坐标
				//创建span和相关样式
				var randomColor = parseInt(Math.random()*colors.length);0.1*10
				var randomY = parseInt(Math.random()*400);
				
				$("<span></span>").text($("#text").val()).css("color",colors[randomColor])
				.css("left","1400px")
				.css("top",randomY)
				.animate({left:-500},10000,"linear",function(){
					$(this).remove();//动画完成时,执行的函数
				})
				.appendTo("#boxDom");
				
				
				$("#text").val("");
			});
			$("#text").keyup(function(e){
				if(e.keyCode==13){
					$("#btn").click();
				}
			});
			
		});
		
	</script>
</html>

BlogChat

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
弹幕

//弹幕&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="js/jquery-1.8.3.min.js"&gt;&lt;/script&g
复制链接

扫一扫