jQuery實現(xiàn)彈幕效果
更新時間：2017年02月17日 11:45:25 作者：5945wm
本文主要分享了jQuery實現(xiàn)彈幕效果的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧
效果如下：
代碼如下：
<!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="發(fā)送" 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("");//點擊過后設置文本框內(nèi)容為空
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>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
淺談Jquery中Ajax異步請求中的async參數(shù)的作用
下面小編就為大家?guī)硪黄獪\談Jquery中Ajax異步請求中的async參數(shù)的作用。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
JQuery $.each遍歷JavaScript數(shù)組對象實例
聲明了一個JSON字符串直接遍歷，在Chrome控制臺下面報錯，解決方法是將JSON字符串轉(zhuǎn)換為JavaScript對象2014-09-09
基于jQuery的一款圖片展示特效代碼,鼠標移到圖片上方懸停時會自動切換成文字簡單顯示,適合做圖片集展示,推薦給大家。2015-11-11![jquery 入門教程 [翻譯] 推薦](http://img.jbzj.com/images/xgimg/bcimg3.png)
此文以實例為基礎一步步說明了jQuery的工作方式?，F(xiàn)以中文翻譯（添加我的補充說明）如下。如有相關(guān)意見或建議請 EMAIL 告知。或者在 BLOG中留言。2009-08-08
JQuery擴展插件Validate 3通過參數(shù)設置錯誤信息
最終顯示在頁面上的錯誤分為兩種：第一種是默認錯誤信息，該信息已經(jīng)被定義在插件中了，可以手動修改。2011-09-09
下面小編就為大家?guī)硪黄趈Query的表單填充實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
jquery實現(xiàn)隱藏在左側(cè)的彈性彈出菜單效果
這篇文章主要介紹了jquery實現(xiàn)隱藏在左側(cè)的彈性彈出菜單效果,涉及jQuery動態(tài)操作頁面元素的顯示及隱藏技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了JQuery 在線引用及測試引用是否成功的示例,需要的朋友可以參考下2014-06-06
很多網(wǎng)站的首頁都有廣告輪播，今天閑來看了一網(wǎng)站的首頁廣告輪播方式，是通過 jQuery的blockSlide插件實現(xiàn)的，然后自己測試了一下，很好。2010-11-11
jQuery插件Validate實現(xiàn)自定義校驗結(jié)果樣式
這篇文章主要介紹了jQuery插件Validate實現(xiàn)自定義校驗結(jié)果樣式的方法，感興趣的小伙伴們可以參考一下2016-01-01