<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.shoot{
position: absolute;
width: 100%;
height: 80px;
line-height: 80px;
text-align: center;
bottom: 0px;
background-color: coral;
border: 1px solid coral;
}
</style>
<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//定义颜色和高度表
var colors = new Array();
colors[0] = "red";
colors[1] = "pink";
colors[2] = "green";
colors[3] = "yellow";
var heights = new Array();
heights[0] = "50px";
heights[1] = "100px";
heights[2] = "150px";
//随机码
var count = 0;
$("input[type='button']").click(function(){
//随机生成颜色和高度
var indexColor = count % colors.length;
var indexHeight = count % heights.length;
//获取文本输入的内容
var textInput = $("input[type='text']").val();
//生成span对象
var styleSpan = "style='color:"+colors[indexColor]+";"+"position:absolute;right:0;top:"+heights[indexHeight]+";'"
var $elementSpan = $("<span "+styleSpan+">"+textInput+"</span>");
//为span对象添加动画效果
$elementSpan.animate({left: '-500px'}, 10000,"linear",function(){
$(this).remove();
});
//将span对象加入到文档中
$("body").append($elementSpan);
count++;
})
})
</script>
</head>
<body>
<div class="shoot">
<input type="text" id="ballet" />
<input type="button" name=""value="shoot" />
</div>
</body>
</html>
JQuery练习丨弹幕
猜你喜欢
转载自blog.csdn.net/qq_36134369/article/details/82883615
今日推荐
周排行