Jquery之实现弹幕效果

最新推荐文章于 2022-04-23 11:22:24 发布

程序员Syoyu

最新推荐文章于 2022-04-23 11:22:24 发布

阅读量374

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/weixin_42545469/article/details/102494871

版权

Jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

转自个人网站：https://www.jinxiaoliang.cn/798.html

Jquery之实现弹幕效果

1.效果演示如下

2.功能分析

点击按钮，获取input框中的值并把他传送到上面的弹幕盒子里面
弹幕的颜色随机、距离顶部的距离不一并且迅速滑过屏幕
点击按钮后，input框中的值清空

3.用到的方法

Math.random()//用来取随机值

<li>css()//设置弹幕样式</li>

<li> animate()//添加动画</li>

<li>appendTo//添加节点</li>

<li> $("<span></span>")//创建span标签节点</li>

4.代码如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		#box {
			width: 100%;
			height: 500px;
			background-color: #ccc;
			overflow: hidden;
		}
		input {
			width: 200px;
			height: 30px;
			border: 1px solid #ccc;
			padding-left: 10px;
			outline: none;
			margin-top: 10px;
			margin-left: 500px;
			float: left;
		}
		button {
			height: 32px;
			width: 100px;
			background: #ccc;
			border: 1px solid #ccc;
			outline: none;
			margin-top: 10px;
			float: left
		}
		span {
			position: absolute;
			font-size: 20px
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<input type="text" placeholder="说点什么吧！！！">
	<button>发送弹幕</button>

	<script src="../jquery/jquery-1.12.4.js"></script>
	<script>
		$(function() {
			$("button").click(function() {
				var colorRandom = ["yellow","red","green","blue","skyblue","black","orange","#FF4040","#FFB6C1","#CDC9A5"];
				var color = parseInt(Math.random()*10);
				var randomY = parseInt(Math.random()*400);
				$("<span></span>").text($("input").val())
				.css("left",1200)
				.css("top",randomY)
				.css("color",colorRandom[color])
				.animate({left:-500}, 5000)
				.appendTo('#box');

				$("input").val("");
			});
		});
	</script>
</body>
</html>

程序员Syoyu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Jquery之实现弹幕效果

Jquery之实现弹幕效果1.效果演示如下2.功能分析点击按钮，获取input框中的值并把他传送到上面的弹幕盒子里面弹幕的颜色随机、距离顶部的距离不一并且迅速滑过屏幕点击按钮后，input框中的值清空3.用到的方法 Math.random()//用来取随机值<li>css()//设置弹幕样式</li><li> animate()...
复制链接

扫一扫