Home >Web Front-end >JS Tutorial >JQ realizes barrage effect
JQ realizes barrage effect
- 藏色散人forward
- 2020-02-25 13:57:062926browse
JQ realizes the barrage effect, come and spit out your thoughts
The code is as follows, copy it and use it:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JQ实现弹幕效果</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box{
height:700px;
width:1000px;
margin: 0 auto;
border:1px solid #000000;
position: relative;
}
#main{
width:100%;
height:605px;
position: relative;
overflow: hidden;
}
p{
position: absolute;
left:1000px;
width:200px;
top:0;
}
#bottom{
width:100%;
height:80px;
background: #ABCDEF;
text-align: center;
padding-top: 15px;
position: absolute;
left: 0;
bottom: 0;
}
#txt{
width:300px;
height:50px;
}
#btn{
width:100px;
height:50px;
}
</style>
</head>
<body>
<div id="box">
<div id="main">
</div>
<div id="bottom">
<input type="text" id="txt" placeholder="请输入内容" />
<input type="button" id="btn" value="发射" />
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
$(function(){
var pageH=parseInt($("#main").height());
var colorArr=["#cfaf12","#12af01","#981234","#adefsa","#db6be4","#f5264c","#d34a74"];
$("#btn").bind("click",auto);
document.onkeydown=function(e){
if(e.keyCode == 13){
auto();
}
};
function auto(){
var $value = $("#txt").val();
$("#main").append("<p>" + $value + "</p>");
$("#txt").val("");
var _top=parseInt(pageH*(Math.random()));
var num=parseInt(colorArr.length*(Math.random()));
$("p:last-child").css({"top":_top,"color":colorArr[num],"font-size":"20px"});
$("p:last-child").animate({"left":"-200px"},10000);
$("p:last-child").stop().animate({"left":"-300px"},10000,"linear",function(){
$(this).remove();
});
//console.log($value);
};
})
</script>
</body>
</html>For more programming related content, please pay attention to php Chinese websiteIntroduction to Programming column!
The above is the detailed content of JQ realizes barrage effect. For more information, please follow other related articles on the PHP Chinese website!
Statement：
This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete