弹幕效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>彈幕效果</title>
<script src="../../jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/css">
html,
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
font-family: "微軟雅黑";
font-size: 62.5%;
background: #ccc;
}
.boxDom {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.idDom {
width: 100%;
height: 60px;
background: #666;
position: fixed;
bottom: 0px;
}
.content {
display: inline-block;
width: 430px;
height: 40px;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
}
.title {
display: inline;
font-size: 4em;
vertical-align: bottom;
color: #fff;
}
.text {
border: none;
width: 300px;
height: 30px;
border-radius: 5px;
font-size: 2.4em;
}
.btn {
width: 60px;
height: 30px;
background: #f90000;
border: none;
color: #fff;
font-size: 2.4em;
}
.string {
width: 300px;
height: 40px;
position: absolute;
overflow: hidden;
color: #000;
font-size: 4em;
line-height: 1.5em;
cursor: pointer;
white-space: nowrap;
}
</style>
<body>
<div class="boxDom" id="boxDom">
<div class="idDom" id="idDom">
<div class="content">
<p class="title">吐槽:</p>
<input type="text" class="text" id="text" />
<button type="button" class="btn" id="btn">發(fā)射</button>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
var pageW = parseInt($(document).width());
var pageH = parseInt($(document).height());
var boxDom = $("#boxDom");
var btnDom = $("#btn");
var Top, Right;
var width;
width = pageW;
var colorArr = ["#cfaf12", "#12af01", "#981234", "#adefsa", "#db6be4", "#f5264c", "#d34a74"];
btnDom.bind("click", auto);
document.onkeydown = function(e) {
if(e.keyCode == 13) {
auto();
}
}
function auto() {
var creSpan = $("<span class='string'></span>");
var text = $("#text").val();
creSpan.text(text);
$("#text").val("");
Top = parseInt(pageH * (Math.random()));
var num = parseInt(colorArr.length * (Math.random()));
if(Top > pageH - 90) {
Top = pageH - 90;
}
creSpan.css({
"top": Top,
"right": -300,
"color": getRandomColor()
});
boxDom.append(creSpan);
var spanDom = $("#boxDom>span:last-child");
spanDom.stop().animate({
"right": pageW + 300
}, 10000, "linear", function() {
$(this).remove();
});
}
function getRandomColor() {
return '#' + (function(h) {
console.log(h)
return new Array(7 - h.length).join("0") + h
})((Math.random() * 0x1000000 << 0).toString(16));
}
});
</script>
</body>
</html>
轉(zhuǎn)載于:https://www.cnblogs.com/icey618/p/7686716.html
總結(jié)
- 上一篇： ant中的loading按钮使用
- 下一篇： js 值太大自动转换bignumber