JQ弹幕效果-视频出现的那种

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>qdabc.cn</title>
		<style>
			.barrage .screen{width:100%;height:100%;position:absolute;top:0px;right:0px;}

			.barrage .screen .s_close{z-index:2;top:20px;right:20px;position:absolute;text-decoration:none;width:40px;height:40px;border-radius:20px;text-align:center;color:#fff;background:#000;line-height:40px;}
			
			.barrage .screen .mask{position:relative;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity:1);z-index:1;}
			
			.barrage{width:100%;height:100%;}
			
			.barrage .screen .mask div{position:absolute;font-size:20px;font-weight:bold;white-space:nowrap;line-height:40px;z-index:40;}
			
			.barrage .send{z-index:1;width:100%;height:55px;background:#000;position:absolute;bottom:0px;text-align:center;left: 0;}
			
			.barrage .send .s_text{width:600px;height:40px;line-height:10px;font-size:20px;font-family:"微软雅黑";}
			
			.barrage .send .s_btn{width:105px;height:40px;background:#22B14C;color:#fff;border-radius: 5px}
			.showBarrage{
				text-decoration: none; cursor: pointer; font-family: "微软雅黑"; color: #DDD8CE; display: none; }
			.hideBarrage{
				text-decoration: none; cursor: pointer; font-family: "微软雅黑"; color: #DDD8CE; }
			.mask{
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div class="barrage">
			<div class="screen">
				<div class="mask">
				<!--内容在这里显示-->
				<img src="" />
				</div>
			</div>
			<!--Send Begin-->
			<div class="send">
				<a href="#" class="showBarrage">打开弹幕</a>
				<a href="#" class="hideBarrage">关闭弹幕</a>
				<input type="text" class="s_text"/>
				<input type="button" class="s_btn" value="发送"/>
			</div>
		</div>
	</body>
</html>
<script language="javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
	$(function(){
		$(".showBarrage").click(function(){
		   $('.showBarrage').hide().siblings('.hideBarrage').show();
		   $('.mask').children('div').show();
		});
		$('.hideBarrage').click(function(){
			$('.hideBarrage').hide().siblings('.showBarrage').show();
			$('.mask').children('div').hide();
		})
		})
		//提交评论
		 var tier=1;
		$(".send .s_btn").click(function(){
			 tier+=1;
		 send_barrage(tier)
		 $('.s_text').val("");
		})
		//enter键提交
		$(document).keyup(function(event){
			 tier+=1;
			if(event.keyCode==13){
				send_barrage( tier);
				 $('.s_text').val("");
			}
		})
		//根据后台数据 创建弹幕
		function send_barrage(tier){
			var text = $(".s_text").val();
			if(text == ""){
				alert("请输入弹幕");
			     return;
			}else if(text.length>20){
				alert("输入的字达到上限")
				$('.s_text').val("");
				return;
			}
			var _lable = $("<div style='display:inline;right:20px;top:0px;opacity:1;color:"+getRandomColor()+";z-index:"+tier+"'>"+text+"</div>");
			   $(".mask").append(_lable.show());
			   init_barrage();
		}
		//初始化弹幕技术
		function init_barrage(){
			var _top = 0;
			var vules="";
		  $(".mask div").show().each(function(){
		  	var lastDom=$('.mask>div:last-child')
			var _left = $(window).width()-$(this).width();//浏览器最大宽度,作为定位left的值
			var _height = $(window).height();//浏览器最大高度
			     _top +=75;
			if(_top >= (_height -130)){
			_top = 0;
		}
			if(_left<$(window).width()){
				_left=$(window).width();
			}
		lastDom.css({left:_left,top:_top,color:getRandomColor()});
		//定时 弹出文字
		var time = 10000;
		if($(this).index() % 2 == 0){
//			console.log($(this).index())
		  time = 15000;
		}
		$(this).animate({left:"-"+_left+"px"},time,function(){
		     $(this).remove();
		   });
		}
	);
}
//获取随机颜色
	function getRandomColor(){
	    return '#' + (function(h){
	    return new Array(7 - h.length).join("0") + h
	})((Math.random() * 0x1000000 << 0).toString(16))
}
</script>

 

 

欢迎分享本文,转载请保留出处:前端ABC » JQ弹幕效果-视频出现的那种

赞 (2)
分享到:更多 ()

发表评论 0