溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“jQuery如何實現彈幕效果”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“jQuery如何實現彈幕效果”這篇文章吧。
效果如下：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
#wrap{
width:800px;
height:550px;
background:#E9E8E8;
margin:0 auto;
position:relative;
}
#content{
width:750px;
height:400px;
background:#fff;
margin:0 auto;
border-radius: 15px;
position:relative;
overflow:hidden;
}
input:nth-of-type(1){
width:250px;
height:30px;
margin:20px 0 0 200px;
}
input:nth-of-type(2){
width:60px;
height:33px;
}
.p{
height:30px;
line-height:30px;
position:absolute;
top:0;
left:770px;
font-weight:900;
font-size: 30px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content">
</div>
<input type="text" id="txt" placeholder="一起來吐槽吧~"/>
<input type="button" value="發送" id="btn" />
</div>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script>
$(function(){
$("#btn").click(function(){
var $value=$("#txt").val();
var $p=$("<p></p>");
$p.addClass("p");
$p.text($value);
$("#txt").val("");//點擊過后設置文本框內容為空
var _top=Math.floor(Math.random()*($("#content").innerHeight()-30));
var _fontsize=16+Math.floor(Math.random()*10);
var _rgb="rgb(" + Math.floor(Math.random()*255)+"," + Math.floor(Math.random()*255)+"," + Math.floor(Math.random()*255)+")";
$p.css({"top":_top,"font-size":_fontsize,"color":_rgb});
$("#content").append($p);
var _timer=Math.ceil(Math.random()*4000)+3000;
$p.stop().animate({"left":"-500px"},_timer,function(){
$(this).remove();
});
});
})
</script>
</body>
</html>以上是“jQuery如何實現彈幕效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
