<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 1000px;
margin: 50px auto;
}
.box .video {
width: 1000px;
height: 600px;
background:#000;
position: relative;
overflow: hidden;
}
.box .content {
background: #333;
height: 30px;
padding: 10px;
}
.box .content input {
float: right;
border: none;
outline: none;
padding: 0 15px;
height: 30px;
line-height: 30px;
}
</style>
</head>
<body>
<div class="box">
<div class="video"></div>
<div class="content">
<input type="button" value="发射">
<input type="text">
</div>
</div>
<script src="./js/jquery-1.12.4.min.js"></script>
<script>
// 随机生成颜色模块
function randomColor() {
var r = parseInt(Math.random() * 256);
var g = parseInt(Math.random() * 256);
var b = parseInt(Math.random() * 256);
return 'rgb(' + r + ',' + g + ',' + b + ')';
}
// 给按钮添加点击事件
$("input").eq(0).click(function () {
// 准备生成的span的随机位置
var randomTop = Math.random() * $(".video").height();
$("<span></span>").text($("input").eq(1).val()).css({
position: "absolute",
top: randomTop,
right: -60,
color: randomColor(),
display: "block",
whiteSpace: "nowrap" // 强制一行显示,这个是必备的,不然文字跑到左边的时候回自动换行
}).appendTo($(".video")).animate({
right: $(".video").width()
}, 2000,function(){
// span的动画完成后及时清除掉
$(this).remove();
});
// 动画完成后将输入框的内容清空
$("input").eq(1).val("");
});
</script>
</body>
</html>
jquery制作弹幕
最新推荐文章于 2021-12-24 17:06:48 发布