終于實(shí)現(xiàn)了!精彩的jquery彈幕效果

字號:


    本文實(shí)例為大家分享了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 onclick=" run_example() ">彈彈彈</button>
        <hr/>
        <div>
          <div>
            <form>
              <div> 
              <div>
              <label >文字</label>
              <div>
                <input name="info" type="text" placeholder="彈幕文字信息"/>
              </div>
            </div> 
              <div>
              <label >鏈接</label>
              <div>
                <input name="href" type="text" placeholder="http://www.yaseng.org"/>
              </div> 
              </div>
              <div>
              <label >延遲</label>
              <div>
                <input name="speed" type="text" placeholder="6" value="6" />
              </div>
              <label >關(guān)閉按鈕</label>
              <div>
                <input name="close" type="checkbox" checked  >
              </div>
            </div>
              <div>
              <label >高度</label>
              <div>
                <label>
                  <input type="radio" name="bottomradio"  value="0" checked="checked"> 隨機(jī)
                </label>
                <label>          
                  <input type="radio" name="bottomradio"  value="1" > 設(shè)置
                </label>
              </div>
              <div>
                <input name="bottom" type="text" placeholder="70" value="70"  />
              </div>
            </div>
              <div>
                <label >圖片</label>
                <div>
                  <label>
                    <input type="radio" name="img" value="cute.png" checked=""> cute.png
                  </label>
                  <label>
                    <input type="radio" name="img" value="haha.gif"> haha.gif
                  </label>
                  <label>
                    <input type="radio" name="img"  value="none"> 無圖
                  </label>
                </div>
              </div>
              </div>
              <div>
              <label ></label>
              <div>
                <input type="button" onclick=" run() " value="運(yùn)行">
              </div>
              <div>
                <button onclick=" clear_barrage() "> 清除</button>
              </div>
            </div>
            </form>
          </div>
        <div>
          <textarea 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)隨機(jī) \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)隨機(jī) \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ā)生時(shí)的調(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í)有所幫助