快捷導(dǎo)航

jQuery實(shí)現(xiàn)彈幕效果

更新時(shí)間：2017年02月17日 11:45:25 作者：5945wm

本文主要分享了jQuery實(shí)現(xiàn)彈幕效果的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧

效果如下：

代碼如下：

<!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="一起來(lái)吐槽吧~"/>
 <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("");//點(diǎn)擊過(guò)后設(shè)置文本框內(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>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

jQuery前端框架easyui使用Dialog時(shí)bug處理
本文介紹了在jQuery前端框架easyui開發(fā)UI時(shí)，使用Dialog時(shí)發(fā)現(xiàn)遮罩無(wú)法覆蓋頁(yè)面內(nèi)容，而且對(duì)話框也顯示不出來(lái)，經(jīng)過(guò)一番研究，才發(fā)現(xiàn)問(wèn)題所在，這里分享給大家，有相同情況的小伙伴可以參考下
2014-12-12
jquery解決客戶端跨域訪問(wèn)問(wèn)題
這篇文章主要介紹了jquery解決客戶端跨域訪問(wèn)問(wèn)題,jQuery.ajax()支持get方式的跨域，這其實(shí)是采用jsonp的方式來(lái)完成的，需要的朋友可以參考下
2015-01-01
淺談jquery的html方法里包含特殊字符的處理
下面小編就為大家?guī)?lái)一篇淺談jquery的html方法里包含特殊字符的處理。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-11-11
JQuery控制div外點(diǎn)擊隱藏而div內(nèi)點(diǎn)擊不會(huì)隱藏的方法
這篇文章主要介紹了JQuery控制div外點(diǎn)擊隱藏而div內(nèi)點(diǎn)擊不會(huì)隱藏的方法,涉及show、hide及stopPropagation等方法的使用技巧,需要的朋友可以參考下
2015-01-01
jQueryUI如何自定義組件實(shí)現(xiàn)代碼
第一次自定義jQueryUI Widget 又是第一次，現(xiàn)在的感受是jQueryUI Widget能讓你代碼組織得更好,風(fēng)格更一致。
2010-11-11
jQuery中not()方法用法實(shí)例
這篇文章主要介紹了jQuery中not()方法用法,實(shí)例分析了not()方法的功能、定義及刪除與指定表達(dá)式匹配的元素的使用技巧,需要的朋友可以參考下
2015-01-01
jquery獲取點(diǎn)擊控件的絕對(duì)位置簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery獲取點(diǎn)擊控件的絕對(duì)位置簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
可輸入文字查找ajax下拉框控件 ComBox的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇可輸入文字查找ajax下拉框控件 ComBox的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
jquery層次選擇器的介紹
今天小編就為大家分享一篇關(guān)于jquery層次選擇器的介紹，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧
2019-01-01
jQuery formValidator表單驗(yàn)證
這篇文章主要介紹了jQuery formValidator表單驗(yàn)證的相關(guān)資料,需要的朋友可以參考下
2016-01-01