JQuery练习丨弹幕

最新推荐文章于 2022-03-31 19:40:54 发布

我感觉自己好帅

最新推荐文章于 2022-03-31 19:40:54 发布

阅读量120

点赞数

分类专栏：日常文章标签： JQuery 弹幕

本文链接：https://blog.youkuaiyun.com/qq_36134369/article/details/82883615

版权

日常专栏收录该内容

29 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.shoot{
				position: absolute;
				width: 100%;
				height: 80px;
				line-height: 80px;
				text-align: center;
				bottom: 0px;
				background-color: coral;
				border: 1px solid coral;
			}
		</style>
		<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//定义颜色和高度表
				var colors = new Array();
				colors[0] = "red";
				colors[1] = "pink";
				colors[2] = "green";
				colors[3] = "yellow";
				var heights = new Array();
				heights[0] = "50px";
				heights[1] = "100px";
				heights[2] = "150px";
				//随机码
				var count = 0;
				$("input[type='button']").click(function(){
					//随机生成颜色和高度
					var indexColor = count % colors.length;
					var indexHeight = count % heights.length;
					//获取文本输入的内容
					var textInput = $("input[type='text']").val();
					//生成span对象
					var styleSpan = "style='color:"+colors[indexColor]+";"+"position:absolute;right:0;top:"+heights[indexHeight]+";'"
					var $elementSpan = $("<span "+styleSpan+">"+textInput+"</span>");
					//为span对象添加动画效果
					$elementSpan.animate({left: '-500px'}, 10000,"linear",function(){
						$(this).remove();
					});
					//将span对象加入到文档中
					$("body").append($elementSpan);
					count++;
				})
			})
		</script>
	</head>
	<body>
		<div class="shoot">
			<input type="text" id="ballet" />
			<input type="button" name=""value="shoot" />
		</div>
	</body>
</html>