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實現(xiàn)簡單的圖片滑動切換特效
基于jQuery的一款圖片展示特效代碼,鼠標移到圖片上方懸停時會自動切換成文字簡單顯示,適合做圖片集展示,推薦給大家。
2015-11-11
jquery 入門教程 [翻譯] 推薦
此文以實例為基礎(chǔ)一步步說明了jQuery的工作方式?，F(xiàn)以中文翻譯（添加我的補充說明）如下。如有相關(guān)意見或建議請 EMAIL 告知。或者在 BLOG中留言。
2009-08-08
JQuery擴展插件Validate 3通過參數(shù)設置錯誤信息
最終顯示在頁面上的錯誤分為兩種：第一種是默認錯誤信息，該信息已經(jīng)被定義在插件中了，可以手動修改。
2011-09-09
基于jQuery的表單填充實例
下面小編就為大家?guī)硪黄趈Query的表單填充實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
jquery實現(xiàn)隱藏在左側(cè)的彈性彈出菜單效果
這篇文章主要介紹了jquery實現(xiàn)隱藏在左側(cè)的彈性彈出菜單效果,涉及jQuery動態(tài)操作頁面元素的顯示及隱藏技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-09-09
JQuery 在線引用及測試引用是否成功
這篇文章主要介紹了JQuery 在線引用及測試引用是否成功的示例,需要的朋友可以參考下
2014-06-06
基于jQuery的仿flash的廣告輪播
很多網(wǎng)站的首頁都有廣告輪播，今天閑來看了一網(wǎng)站的首頁廣告輪播方式，是通過 jQuery的blockSlide插件實現(xiàn)的，然后自己測試了一下，很好。
2010-11-11
jQuery插件Validate實現(xiàn)自定義校驗結(jié)果樣式
這篇文章主要介紹了jQuery插件Validate實現(xiàn)自定義校驗結(jié)果樣式的方法，感興趣的小伙伴們可以參考一下
2016-01-01