弹幕效果

最新推荐文章于 2023-09-23 10:58:19 发布

凡人·没有梦

最新推荐文章于 2023-09-23 10:58:19 发布

阅读量911

点赞数

分类专栏： javascript 文章标签： javascript 弹幕

本文链接：https://blog.csdn.net/pleasurehappy/article/details/45653061

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

简单实现弹幕效果，注意jQuery文件的引用

<!doctype html>
<html>
	<head>
		<meta charset="urf-8"/>
		<style>
			body{
				
				border:0;margin:0;padding:0;
			}
			.slade_div{width:100%;height:100%;background:#000;opacity:0.8;filter:alpha(opacity=70);
				position:absolute;top:0;}
			.slade_div .close_opt{
				display:block;background:red;line-height:40px;text-align:center;
				width:40px;height:40px;color:#fff;border-radius:20px;position:absolute;right:10px;top:5px;
				font-size:26px;
			}
			.slade_div ul{height:850px;overflow:hidden;}
			.slade_div ul li{
				list-style:none;
				color:#fff;
				position:absolute;
				font-size:22px;
				white-space:nowrap;
				font-weight:bold;
			}
			.slade_div .footer{
				height:50px;
				border-top:1px solid #fff;
				text-align:center;
				line-height:50px;
				padding-top:15px;
			}
			.slade_div .footer .text_msg{
				width:500px;
				height:30px;
				border:1px solid red;
				font-size:18px;
				color:#188333;
			}
			.slade_div .footer .send{
				width:90px;
				height:30px;
				background:#188eee;
			}
			.show_opt{display:block;margin:315px 450px;font-size:200px;color:#823748;}
			.slade_div h1{
				  position: absolute;
				  top: 7px;
				  left: 475px;
				  color: #CF1;
				  font-size: 40px;
			}
		</style>
		<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
	</head>
	<body>
		<a class="show_opt">click</a>
		<div class="slade_div">
			<a class="close_opt">X</a>
			<h1>^_^^_^^_^Demo^_^^_^^_^</h1>
			<ul>
				<li>?????AAAAAAAAAAAAAAAAAAAAAAAAAAAAA?????</li>
				<li>AAAAAAAAAAAAAAAAAAAAAAAAAAAAA</li>
				<li>AAAAAAAAAAAAAAAAAAAAAAAAAAAAA</li>
				<li>AAAAAAAAAAAAAAAAAAAAAAAAAAAAA......</li>
				<li>AAAAAAAAAAAAAAAAAAAAAAAAAAAAA......</li>
				<li>AAAAAAAAAAAAAAAAAAAAA......</li>
				<li>AAAAAAAAAAAAAAAAAAAAA......</li>
				<li>AAAAAAAAAAAAAAAAAAAAA......</li>
				<li>AAAAAAAAAAAAAAAAAAAAA......</li>
				<li>AAAAAAAAAAAAAAAAAAAAA......</li>
				<li>AAAAAAAAAAAAAAAAAAAAA......</li>
				<li>AAAAAAAAAAAAAAAAAAAAA......</li>
			</ul>
			<div class="footer">
				<input type="text" class="text_msg"/> 
				<input type="button" class="send" value="说说吧"/>
			</div>
		</div>
		
		<script type="text/javascript">
			$(function(){
				$('a.close_opt,a.show_opt').click(function(){
					$('div.slade_div').toggle('slow');
				});

				$('.send').click(function(){
					var msg = $('.text_msg').val();
					if(msg == '')return false;
					$('ul').append('<li>'+msg+'</li>');
					init_animate();
				});
				init_animate();
				setTimeout(function(){
					setInterval(function(){
						$('.text_msg').val('BBBBBBBBBBBBBBBBBBBBBBBBB');
						$('.send').click();
					},200);
				},5000)
			});
			var arr = ['4','5','6','7','8','9','a','b','c','d','e','f'];
			function getRandomColor(){
				var cVal = '#';
				for(var i=0;i<6;i++){
					var index = Math.ceil(Math.random()*arr.length) - 1;
					cVal += arr[index];
				}
				return cVal;
			}
			
			function init_animate(){
				var _top = 0;
				$('ul>li').each(function(){
					if(_top >= 800)_top=0;
					_top += 75;
					var liwidth = $(this).width();
					var _width = $(window).width();
					var _cval = getRandomColor();
					var time = 0;
					var _index = $(this).index()%3;
					switch(_index){
						case 0:
							time = 8000;
							break;
						case 1:
							time = 9000;
							break;
						case 2:
							time = 9500;
							break;
						default:
							break;
					}
					$(this).css({top:_top,color:_cval,left:_width});
					$(this).animate({left:'-'+liwidth},time,function(){
						this.remove();
					});
				});
			}
		</script>
	</body>
</html>