网页JavaScript特效之弹幕

最新推荐文章于 2023-04-03 10:17:33 发布

原创最新推荐文章于 2023-04-03 10:17:33 发布 · 817 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#入门 #特效 #html #javascript #弹幕

HTML/Css/Javascript学习专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和jQuery实现的简单弹幕效果。该效果包括输入框和发射按钮，点击按钮后会在页面上随机位置生成带有用户输入文本的滚动弹幕。

此处使用HBuilder编译，最简单的弹幕效果，希望各位前辈不吝指教。

注意用的是jquery-2.0.3.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.shooter{
			width: 600px;
			height: 60px;
			/*background: black;*/
			margin: 0 auto;
		}
		.shooter input{
			width: 300px;
			height: 40px;
			border: none;
			border-radius: 7px;
			box-shadow: 0 0 8px rgba(182,195,214,0.6)inset;
			padding-left: 15px;
			margin-top: 10px;
		}
		.shooter button{
			width: 80px;
			height: 40px;
			border: none;
			margin-left: 10px;
			background-color:#339B53;
			border-radius:8px;
			color: white;
			cursor: pointer;
		}
		
		.shooter button:hover{
			font-size: 14px;
			background:#008000;
		}
		.content{
			width: 100%;
			height: 600px;
			background: gray;
			position: relative;
			overflow: hidden;
		}
		
		.bullet{
			position: absolute;
			/*right: 0;*/
			/*left:1600px;*/
			word-break: keep-all;
			/*不让单词折行*/
			
			
		}
		
	</style>
	
	<body>
		<div class="shooter">
			
			<input type="text"/>
			<button>发射</button>
			
		</div>
		<div class="content">
			
		</div>
		<script type="text/javascript" src="js/jquery-2.0.3.js" ></script>
		
		<script type="text/javascript">
			$("button").click(function(){
				
				var msg = $("input").val();
				//取出输入框内容
				
				if(msg.length > 15){
					
					alert("字数不得超过15个！");
					return;
				}
				
				var bullet = $("<div>");
				//生成一条弹幕
				bullet.text(msg);
				//将输入框内容放置到div中
				bullet.addClass("bullet");
				//为bullet这个div添加样式bullet
				bullet.css("top",Math.round(Math.random()*500));
				//随机设置弹幕位置
				bullet.css("left","1600px");
				bullet.css("font-size",Math.round(Math.random()*60)+12+"px");
				bullet.css("color","rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")");
//				alert(window.getComputedStyle(bullet,null).width);
				bullet.animate({
					left:-1000//此处视为bug，应该随着弹幕的长短而变化
				},Math.round(Math.random()*9000)+1000,"linear", function(){
					bullet.remove();
					//当运动结束时，删除弹幕
				});
				
				$(".content").append(bullet);
				//将弹幕添加到屏幕中
				
				
			});
		</script>
	</body>
</html>

下面是展示的弹幕效果（显示的白线在谷歌浏览器中是看不出来的，在录制时会看出来，此处又一bug）：