jQury弹幕

小蜗牛爱土豆
小蜗牛爱土豆 发布于 2017-02-16 20:06:45 浏览:2110 类型:原创 - 随笔 分类:JavaScript - 弹幕随机颜色 二维码: 作者原创 版权保护
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#box{
				height:700px;
				width:1000px;
				margin: 0 auto;
				border:1px solid #000000;
				position: relative;
			}
			#main{
				width:100%;
				height:605px;
				position: relative;
				overflow: hidden;
			}
			p{
				position: absolute;
				left:1000px;
				width:200px;
				top:0;
			}
			#bottom{
				width:100%;
				height:80px;
				background: #ABCDEF;
				text-align: center;
				padding-top: 15px;
				position: absolute;
				left: 0;
				bottom: 0;
			}
			#txt{
				width:300px;
				height:50px;	
			}
			#btn{
				width:100px;
				height:50px;				
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="main">
				
			</div>
			<div id="bottom">
				<input type="text" id="txt" placeholder="请输入内容" />
				<input type="button" id="btn" value="发射" />
			</div>
		</div>
		<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
		<script type="text/javascript">
			$(function(){
				var pageH=parseInt($("#main").height());
				var colorArr=["#cfaf12","#12af01","#981234","#adefsa","#db6be4","#f5264c","#d34a74"];				
				$("#btn").bind("click",auto);
				document.onkeydown=function(e){
		            if(e.keyCode == 13){
		                auto();
		            }
		        };
				function auto(){
					var $value = $("#txt").val();
					$("#main").append("<p>" + $value + "</p>");
					$("#txt").val("");
					var _top=parseInt(pageH*(Math.random()));
					var num=parseInt(colorArr.length*(Math.random()));
					$("p:last-child").css({"top":_top,"color":colorArr[num],"font-size":"20px"});
					$("p:last-child").animate({"left":"-200px"},10000);
					$("p:last-child").stop().animate({"left":"-300px"},10000,"linear",function(){
                        $(this).remove();
                   });				
					//console.log($value);
				};
				
			})
		</script>
	</body>
</html>
z
给个赞 36 人点赞
收藏 72 人收藏
评论 已有 5 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最热评论
Hypocrisy丶Cc
Hypocrisy丶Cc2017-02-20 09:30:532F
弹幕出现的位置有概率被下面的蓝框遮住
举报 支持 (2) 回复 (1)
最新评论
Scoripion
Scoripion2017-02-27 13:15:155F
挺好的
举报 支持 (0) 回复 (0)
lopcomvir
lopcomvir2017-02-20 13:34:144F
看标题以为是东方弹幕
举报 支持 (0) 回复 (0)
244396012
2443960122017-02-20 09:48:173F
可以判断下 //@Hypocrisy丶Cc:弹幕出现的位置有概率被下面的蓝框遮住
举报 支持 (0) 回复 (0)
Hypocrisy丶Cc
Hypocrisy丶Cc2017-02-20 09:30:532F
弹幕出现的位置有概率被下面的蓝框遮住
举报 支持 (2) 回复 (1)
244396012
2443960122017-02-20 08:51:501F
嘿,有点儿意思
举报 支持 (0) 回复 (0)

作者最新