終于實現(xiàn)了!精彩的jquery彈幕效果
來源：易賢網(wǎng) 閱讀：2030 次 日期：2016-07-26 15:44:44
溫馨提示：易賢網(wǎng)小編為您整理了“終于實現(xiàn)了!精彩的jquery彈幕效果”,方便廣大網(wǎng)友查閱！

本文實例為大家分享了jquery彈幕效果，供大家參考，具體內(nèi)容如下

頁面效果如下:

名單

html頁面如下: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <title></title>

    <link href="static/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <link href="static/css/style.css" rel="stylesheet" type="text/css" />

    <link href="dist/css/barrager.css" rel="stylesheet" type="text/css" />

  </head>

  <body>

    <button class="bb-trigger btn btn-primary btn-lg bb-light-blue" onclick=" run_example() ">彈彈彈</button>

    <hr/>

    <div class="row">

      <div class="col-md-6">

        <form class="form-horizontal">

          <div style="display: none"> 

          <div class="form-group">

          <label class="col-sm-2 control-label" >文字</label>

          <div class="col-sm-6">

            <input class="form-control" name="info" type="text" placeholder="彈幕文字信息"/>

          </div>

        </div> 

          <div class="form-group">

          <label class="col-sm-2 control-label" >鏈接</label>

          <div class="col-sm-6">

            <input class="form-control" name="href" type="text" placeholder="http://www.yaseng.org"/>

          </div> 

          </div>

          <div class="form-group">

          <label class="col-sm-2 control-label" >延遲</label>

          <div class="col-sm-2">

            <input class="form-control" name="speed" type="text" placeholder="6" value="6" />

          </div>

          <label class="col-sm-2 control-label" >關(guān)閉按鈕</label>

          <div class="col-sm-2">

            <input class="form-control" name="close" type="checkbox" checked  >

          </div>

        </div>

          <div class="form-group">

          <label class="col-sm-2 control-label" >高度</label>

          <div class="col-sm-4">

            <label class="radio-inline">

              <input type="radio" name="bottomradio"  value="0" checked="checked"> 隨機

            </label>

            <label class="radio-inline">          

              <input type="radio" name="bottomradio"  value="1" > 設(shè)置

            </label>

          </div>

          <div class="col-sm-2">

            <input class="form-control" name="bottom" type="text" placeholder="70" value="70"  />

          </div>

        </div>

          <div class="form-group">

            <label class="col-sm-2 control-label" >圖片</label>

            <div class="col-sm-6">

              <label class="radio-inline">

                <input type="radio" name="img" value="cute.png" checked=""> cute.png

              </label>

              <label class="radio-inline">

                <input type="radio" name="img" value="haha.gif"> haha.gif

              </label>

              <label class="radio-inline">

                <input type="radio" name="img"  value="none"> 無圖

              </label>

            </div>

          </div>

          </div>

          <div class="form-group">

          <label class="col-sm-3 control-label" ></label>

          <div class="col-sm-3">

            <input type="button" class="btn btn-primary bb-light-blue" onclick=" run() " value="運行">

          </div>

          <div class="col-sm-3">

            <button class="btn btn-warning " onclick=" clear_barrage() "> 清除</button>

          </div>

        </div>

        </form>

      </div>

    <div class="col-md-6" style="display: none">

      <textarea class="form-control" id="barrager-code" rows="14" ></textarea>

    </div>

    </div>

  </body>

  <script src="static/js/jquery-1.9.1.min.js" type="text/javascript"></script>

  <script src="static/js/bootstrap.min.js" type="text/javascript"></script>

  <script src="dist/js/jquery.barrager.js" type="text/javascript"></script>

  <script type="text/javascript">

    String.prototype.format = function (args) {

      var result = this;

      if (arguments.length < 1) {

        return result;

      }

      var data = arguments;

      if (arguments.length == 1 && typeof (args) == "object") {

        data = args;

      }

      for (var key in data) {

        var value = data[key];

        if (undefined != value) {

          result = result.replace("{" + key + "}", value);

        }

      }

      return result;

    }

    var barrager_code =

    'var item={\n' +

    "  img:'{img}', //圖片 \n" +

    "  info:'{info}', //文字 \n" +

    "  href:'{href}', //鏈接 \n" +

    "  close:{close}, //顯示關(guān)閉按鈕 \n" +

    "  speed:{speed}, //延遲,單位秒,默認(rèn)6 \n" +

    "  bottom:{bottom}, //距離底部高度,單位px,默認(rèn)隨機 \n" +

    "  color:'{color}', //顏色,默認(rèn)白色 \n" +

    "  old_ie_color:'{old_ie_color}', //ie低版兼容色,不能與網(wǎng)頁背景相同,默認(rèn)黑色 \n" +

    " }\n" + "$('body').barrager(item);"

    ;

    $(function() {

      var default_item = {

        'img': 'static/heisenberg.png',

        'info': '彈幕文字信息',

        'href': 'http://www.yaseng.org',

        'close': true,

        'speed': 6,

        'bottom': 70,

        'color': '#fff',

        'old_ie_color': '#000000'

      };

      var item = { 'img': 'static/img/heisenberg.png', 'href': 'http://www.baidu.com', 'info': 'oldman!WQNMLGB' };

      //item1={'href':'http://www.baidu.com','info':'這是一條很長很長的字幕','close':false};

      $('#barrager-code').val(barrager_code.format(default_item));

      $('body').barrager(item);

    });

    function run() {

      var shi = [

        "朱砂", "天下", "殺伐", "人家", "韶華", "風(fēng)華", "繁華", "血染", " 墨染 ", "白衣", " 素衣", " 嫁衣 ", "傾城 ", "孤城 ", "空城 ", "舊城", "舊人 ", "伊人 ", "心疼 ", "春風(fēng)", " 古琴 ", "無情 ", "迷離 ", "奈何", " 斷弦", " 焚盡 ", "散亂", " 陌路 ", "亂世 ", "笑靨 ", "淺笑", " 明眸", " 輕嘆", " 煙火", "一生 " +

        "三生", " 浮生 ", "桃花 ", "梨花", " 落花", " 煙花", " 離殤", " 情殤", " 愛殤 ", "劍殤", " 灼傷", " 倉皇 ", "匆忙", " 陌上", " 清商", "焚香 ", "墨香 ", "微涼 " +

        "斷腸", " 癡狂 ", "凄涼", " 黃梁", " 未央", " 成雙", " 無恙", " 虛妄", " 凝霜", " 洛陽", " 長安", " 江南", " 忘川", " 千年", " 紙傘 ", "煙雨", " 回眸 ", "公子" +

        "紅塵", " 紅顏 ", "紅衣", " 紅豆 ", "紅線 ", "青絲 ", "青史", " 青冢", " 白發(fā)", " 白首", " 白骨 ", "黃土", " 黃泉 ", "碧落", " 紫陌情深緣淺", " 情深不壽 ", "莫失莫忘" +

        " 陰陽相隔 ", "如花美眷", " 似水流年", " 眉目如畫", " 曲終人散", " 繁華落盡 ", "不訴離殤 ", "一世長安"

      ];

      var info = shi[Math.floor(Math.random() * shi.length)]; //$('input[name=info]').val();

      (info == '') ? info = '請?zhí)顚憦椖晃淖? : info = info;

      var href = $('input[name=href]').val();

      var speed = parseInt($('input[name=speed]').val());

      var bottom = parseInt($('input[name=bottom]').val());

      var code = barrager_code;

      if ($('input:radio[name=bottomradio]:checked').val() == 0) {

        var window_height = $(window).height() - 150;

        bottom = Math.floor(Math.random() * window_height + 40);

        code = code.replace("  bottom:{bottom}, //距離底部高度,單位px,默認(rèn)隨機 \n", '');

      }

      var img = $('input:radio[name=img]:checked').val();

      if (img == 'none') {

        code = code.replace("  img:'{img}', //圖片 \n", '');

      }

      var item = {

        'img': 'static/img/' + img,

        'info': info,

        'href': href,

        'close': true,

        'speed': speed,

        'bottom': bottom,

        'color': getRandomColor(),

        'old_ie_color': getRandomColor()

      };

      if (!$('input[name=close]').is(':checked')) {

        item.close = false;

      }

      code = code.format(item);

      $('#barrager-code').val(code);

      try {

        eval(code);

      } catch (e) {

        /*name: 錯誤名稱

        number: 錯誤號

        description: 描述信息

        message: 錯誤信息

        fileName: 錯誤發(fā)生的文件

        stack: 錯誤發(fā)生時的調(diào)用堆棧 */

        alert(e.message);

      }

      return false;

    }

    function clear_barrage() {

      $.fn.barrager.removeAll();

    }

    function getRandomColor() {

      return "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6);

    } 

    function run_example() {

      var wenzi = ["Hello", "網(wǎng)上", "x戰(zhàn)警", "蜘蛛俠", "死侍"];

      var example_item = { 'img': 'static/img/heisenberg.png', 'info': wenzi[Math.floor(Math.random() * wenzi.length)] };

      $('body').barrager(example_item);

      return false;

    }

  </script>

</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助

更多信息請查看網(wǎng)絡(luò)編程
易賢網(wǎng)手機網(wǎng)站地址：終于實現(xiàn)了!精彩的jquery彈幕效果
由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)！
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 加入群交流 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號：滇ICP備2023014141號-1 云南省教育廳備案號：云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務(wù)許可證：（云）人服證字（2023）第0102001523號
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話：0871-65317125（9:00—18:00） 獲取招聘考試信息及咨詢關(guān)注公眾號：hfpxwx
咨詢QQ：526150442（9:00—18:00）版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報警專用圖標(biāo)