弹幕

最新推荐文章于 2024-03-16 16:44:03 发布

不是我的货

最新推荐文章于 2024-03-16 16:44:03 发布

阅读量317

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/wym1581/article/details/50272775

版权

html 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
	<head>
		<!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!--当前页面的三要素-->
		<title>360弹幕技术 </title>
		<meta name="Keywords" content="关键词,关键词">
		<meta name="description" content="">

		<!--css,js-->
		<style type="text/css">
			body{background:url("images/360.png") no-repeat;font-size:12px;font-family:"微软雅黑";color:#666;}
			*{margin:0;padding:0;}
			/*screen start*/
			.screen{width:100%;height:100%;background:#000;position:absolute;top:0;left:0;
				/*变成透明的 1. background:rgba(0,0,0,0.6); 不兼容IE9内核一下的浏览器*/
				/*兼容所有浏览器*/
				opacity:0.6;filter:alpha(opacity=60);
				display:;
				z-index:1;
			}
			.screen .close{width:38px;height:38px;display:block;background:#C00;
				text-align:center;line-height:38px;text-decoration:none;font-size:26px;color:#fff;
				position:absolute;right:20px;top:20px;border-radius:19px;}
			.screen .con{position:absolute;z-index:2;}
			.screen .con div{line-height:36px;font-size:26px;color:#fff;font-weight:bold;position:absolute;white-space:nowrap; display:none;}
			.screen .send{width:100%;height:55px;background:#000;position:absolute;bottom:0;left:0;opacity:0.9;filter:alpha(opacity=90);border:1px solid red;text-align:center;padding-top:20px;z-index:3;}
			.screen .send .s_text{width:600px;height:40px;line-height:40px;font-size:26px;}
			.screen .send .sub{width:100px;height:40px;font-size:14px;font-family:"微软雅黑";}
			/*end screen*/
		</style>

	</head>
<body>

<a href="#" class="btn">弹幕技术</a>

<div class="screen">
	<a href="#" class="close btn">X</a>
	<!--con start-->
	<div class="con">
		
		<div>别让不好意思害了你</div>
		<div>这么晚了，大家喝杯茶继续听吧！</div>
		<div>我是开心啊</div>
		<div>努力为明天</div>
		
		
	</div>
	<!--end con-->

	<!--send start-->
	<div class="send">
		<input type="text" class="s_text" />
		<input type="button" class="sub" value="说两句" />
	</div>
	<!--end send-->
</div>

<!--导入jquery官方文件-->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	$(function(){
		//alert("大家辛苦了！ 这么还在学习，太棒了，值得鼓励 ，来个掌声吧 ！");
		init_animated();
		$(".btn").click(function(){
			init_animated();
			$(".screen").toggle("slow");
		});

		// 提交评论
		$(".sub").click(function(){
			var text = $(".s_text").val();
			if(text == ""){return;}
			$(".con").append("<div style='right:0px;top:0px;opacity:1;color:"+getRandomColor()+";'>"+text+"</div>");
			init_animated();
		});

		// 初始化弹幕
		function init_animated(){
			var _top = 0;
			$(".con div").show().each(function(){
				var _left = $(window).width(); // 浏览器的最大宽度，作为定位距离left的值，这样子就可以从右边出来了
				var _height = $(window).height(); // 浏览器的最大高度
				_top = _top + 75;
				if(_top >= (_height - 75)){_top = 0;}
				// 设定弹幕文字的默认样式
				$(this).css({left:_left,top:_top,color:getRandomColor()});

				var time = 10000;
				if($(this).index() % 2 == 0){
					time = 12000;
				}
				// 定时弹出文字
				$(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>

</body>
</html>

不是我的货

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
弹幕

360弹幕技术 body{background:url("images/360.png") no-repeat;font-size:12px;font-family:"微软雅黑";color:#666;} *{margin:0;padding:0;} /*screen start*/ .screen{width:100%;height:100%;
复制链接

扫一扫

专栏目录