jQ 发弹幕功效

冷不防 2023-01-18 02:26 72阅读 0赞

**HTML**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>视频弹幕</title>
    		<link rel="stylesheet" type="text/css" href="style/index.css" />
    		<script type="text/javascript" src="js/jquery.js"></script>
    		<script type="text/javascript" src="js/index.js"></script>
    	</head>
    	<body>
    		
    		<div id="top">
    			<div class="topContent">视频弹幕网</div>
    		</div>
    
    		<div id="screen">
    			<div class="video">
    			//自己引用一张图片就好
    				<img src="images/01.jpg" width="1200" />
    			</div>
    			<div class="control">
    				<input type="text" name="message" placeholder="按Enter回车键发送弹幕" />
    				<span class="btn">发送</span>
    			</div>
    		</div>
    		 
    
    	</body>
    </html>

**JS**

$(function(){ 
    	function send(){ 
    		var $message=$("#screen .control input[name=message]");
    		if($message.val()==""){ 
    			alert("弹幕内容不得为空。");
    			$message.focus();
    			return false;
    		}else{ 
    			var videoHeight=$("#screen .video").height();
    			var newTop=parseInt(Math.random()*videoHeight);
    			var $newNode=$('<div class="message">' + $message.val() + '</div>')
    			$("#screen .video").append($newNode);
    			$newNode.css({ 
    				"right":-$("#screen .video .message").last().width()+ "px",
    				"top":newTop + "px"
    			})
    			$newNode.animate({ 
    				"left":-$("#screen .video .message").last().width()+ "px"
    			},getRandomSpeed(),function(){ 
    				$(this).remove();
    			})
    			$message.val("");				
    		}
    	}
    
    	$("#screen .control .btn").on("click",function(){ 
    		send();
    	})
    
    	$(document).on("keyup",function(event){ 
    		if(event.keyCode==13){ 
    			send();
    		}
    	})
    
    	function getRandomSpeed(){ 
    		var min=3000;
    		var max=10000;
    		var speed=parseInt(Math.random()*(max-min+1))+min;
    		return speed;
    	}
    })

**CSS**

*{ margin:0;}
    body{ 
    	font-family: Microsoft YaHei;
    	font-size: 14px;
    	overflow-x: hidden;
    }
    
    a{ text-decoration: none;}
    a:hover{ text-decoration: none;}
    p{ margin-bottom: 10px;}
    
    /*top顶部*/
    #top{ 
    	width:100%; height:40px;
    	line-height: 40px;
    	background-color: #333333;
    }
    #top .topContent{ 
    	width:1100px; height:inherit;
    	margin:0 auto;
    	color:#ffffff;
    }
    
    /*弹幕*/
    #screen{ 
    	width:1200px;
    	margin:0 auto;
    }
    #screen .video{ 
    	position: relative;
    }
    #screen .video div.message{ 
    	display: inline-block;
    	position: absolute;
    	color:#ffffff;
    	font-size: 16px;
    }
    #screen .control{ 
    	height:60px;
    	background-color: #333333;
    	line-height: 60px;
    	padding-left:10px;
    }
    #screen .control input[name=message]{ 
    	width:500px; height:20px;
    	text-indent: 5px;
    	outline: none;
    }
    
    #screen .control .btn{ 
    	display: inline-block;
    	width:80px; height:25px;
    	background-color: #ff5857;
    	line-height: 25px;
    	text-align: center;
    	vertical-align: middle;
    	margin-left:-5px;
    	border-radius: 0 5px 5px 0;
    	color:#ffffff;
    	cursor:pointer;
    }