31-(JQuery动画)简易弹幕效果

最新推荐文章于 2024-11-06 20:20:40 发布

七色的天空

最新推荐文章于 2024-11-06 20:20:40 发布

阅读量48

点赞数

分类专栏： 05_JQuery 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/q506174602/article/details/133834933

版权

05_JQuery 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		html,body{
			margin: 0;
			padding: 0;
			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-color: #666;
			position: fixed;
			bottom: 0;
		}
		.content{
			width: 450px;
			height: 40px;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
		}
		.title{
			float: left;
			font-size: 4em;
			color: #fff;
			margin: 0;
		}
		.text{
			border:none;
			width: 300px;
			height: 30px;
			border-radius: 5px;
			font-size: 2.4em;
			float: left;
		}
		.btn{
			width: 60px;
			height: 32px;
			background-color: #f90000;
			border: none;
			color: #fff;
			font-size: 2.4em;
			float: left;
			margin-left: 10px;
			cursor: pointer;
		}
		span{
			width: 300px;
			height: 40px;
			position: absolute;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-size: 4em;
			color: #000;
			line-height: 1.5em;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div class="boxDom">
		<div class="idDom">
			<div class="content">
				<p class="title">吐槽：</p>
				<input type="text" class="text">
				<button class="btn">发射</button>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="../jquery-3.2.1.js"></script>
	<script type="text/javascript">
		$(function() {
			var colors = ["red","green","blue","yellow","orange","pink","skyblue","yellowgreen","hotpink","cyan","pruple","deepskyblue"];
			$(".btn").click(function () {
				var randomColor = parseInt(Math.random() * colors.length);
				var randomY = parseInt(Math.random() * 400);
				$("<span></span>")//创建span
					.text($(".text").val())//添加内容
					.css("color", colors[randomColor])//添加字体颜色
					.css("left", $(window).width()+ "px")//设置从屏幕左右侧出现
					.css("top", randomY)//垂直方向随机位置出现
					.animate({left:-350},10000,"linear",function () {
						// 到达终点
						$(this).remove()
					})
				.appendTo(".boxDom");
				$(".text").val("");
			})
			$(".text").keyup(function(ev) {
				if (ev.keyCode == 13) {
					$(".btn").click()
				}
			})
		})
	</script>
</body>
</html>

上述运行结果：