基於jquery實現彈幕效果
編輯：JQuery入門技巧
用js寫的一個彈幕
效果圖：
源碼：
<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();
var colortxt = getReandomColor();
var topPos = generateMixed(3);
if(topPos > 500) {
topPos = 30;
}
var newtxt = '<p id="danmu" style="top:' + topPos + 'px; color:' + colortxt + '">' + $("#msg").val() + '</p>';
$(".ctxt").prepend(newtxt);
var addTextW = $(".ctxt").find("p").width();
$(".ctxt p").animate({
left: '-' + addTextW + 20 + "px"
}, 30000, function() {
$(this).hide();
});
$("#msg").val(" ");
});
});
//隨機獲取顏色值
function getReandomColor() {
return '#' + (function(h) {
return new Array(7 - h.length).join("0") + h
})((Math.random() * 0x1000000 << 0).toString(16))
}
//生成隨機數據。n表示位數
var jschars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
function generateMixed(n) {
var res = "";
for(var i = 0; i < n; i++) {
var id = Math.ceil(Math.random() * 9);
res += jschars[id];
}
return res;
}
</script>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。
小編推薦
熱門推薦