效果如下
<html>
<head>
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<div class="container">
<div>
<h4>在这里输入弹幕</h4>
<input id ="danmu" type="" name="">
<button>发射</button>
</div>
<div class="show">
<div id="start"></div>
</div>
</div>
<script type="text/javascript">
var dammuNum = 0;
function create(msg){
dammuNum++;
$(‘#start‘).append("<div id=\""+dammuNum+"\">"+msg+"</div>");
var top = Math.ceil(Math.random()*50);
fun(dammuNum,900,top);
}
function fun(cla,n,top){
if(n>0){
n--;
$("#"+cla).css({left:+n+"px",position:"absolute",top:""+top+"0px"});
setTimeout(fun,10,cla,n);
}if(n==0){
$("#"+cla).remove();
}
}
$("button").click(function(){
create($("#danmu").val());
});
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/godoforange/p/10887881.html
时间： 2024-11-05 16:26:31