基于jquery实现弹幕效果

2020-05-29 07:17:29易采站长站整理

用jquery写的一个弹幕,供大家参考,具体内容如下

效果图:

源码:


<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="favicon.ico" rel="Bookmark" type="image/x-icon" />
-->
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>JQuery弹幕</title>
<link href="" rel="stylesheet" />

</script>
<style type="text/css">
body {
overflow: hidden;
}

.content {
overflow: hidden;
}

.ctxt {
background: burlywood;
width: 100%;
overflow: hidden;
margin: 0 auto;
z-index: 9999;
}

.ctxt p {

left: 95%;
margin: 0;
padding: 0;
z-index: 99;
overflow: hidden;
}

#msg{
height: 24px;
width: 200px;
}

#barrage {
color: gainsboro;
border: 1px solid aqua;
font-size: 12px;
border-radius: 10px;
float: right;
}

#style {
margin-top: 10px;
}

#publish {
display: none;
}

video {

width: 100%;
overflow: hidden;
z-index: -99999;
}

#danmu {
position: absolute;
overflow: hidden;
font-size:20px;
}
</style>
</head>

<body>
<div class="content">

<div id="" class="ctxt">
<video id="vodio" autoplay="autoplay">
<source src="video/1429411761ed3dc100c73251.mp4" type="video/mp4">
</source>

</video>
</div>

<div id="style">
<button id="barrage"> <font style="color: white;">开始弹幕</font></button>
<div id="publish">
<form method="post" align="center">
<input type="text" id="msg" />
<button type="button" id="submitBut">发布</button>
</form>
</div>

</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
$("#barrage").click(function() {
$("#publish").toggle();
});

$("#submitBut").click(function() {

var msgtxt = $("#msg").val();