本文實例為大家分享了jquery彈幕效果，供大家參考，具體內容如下
頁面效果如下:
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" >關閉按鈕</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" > 設置 </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}, //顯示關閉按鈕 /n" + " speed:{speed}, //延遲,單位秒,默認6 /n" + " bottom:{bottom}, //距離底部高度,單位px,默認隨機 /n" + " color:'{color}', //顏色,默認白色 /n" + " old_ie_color:'{old_ie_color}', //ie低版兼容色,不能與網頁背景相同,默認黑色 /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 = [ "朱砂", "天下", "殺伐", "人家", "韶華", "風華", "繁華", "血染", " 墨染 ", "白衣", " 素衣", " 嫁衣 ", "傾城 ", "孤城 ", "空城 ", "舊城", "舊人 ", "伊人 ", "心疼 ", "春風", " 古琴 ", "無情 ", "迷離 ", "奈何", " 斷弦", " 焚盡 ", "散亂", " 陌路 ", "亂世 ", "笑靨 ", "淺笑", " 明眸", " 輕嘆", " 煙火", "一生 " + "三生", " 浮生 ", "桃花 ", "梨花", " 落花", " 煙花", " 離殤", " 情殤", " 愛殤 ", "劍殤", " 灼傷", " 倉皇 ", "匆忙", " 陌上", " 清商", "焚香 ", "墨香 ", "微涼 " + "斷腸", " 癡狂 ", "凄涼", " 黃梁", " 未央", " 成雙", " 無恙", " 虛妄", " 凝霜", " 洛陽", " 長安", " 江南", " 忘川", " 千年", " 紙傘 ", "煙雨", " 回眸 ", "公子" + "紅塵", " 紅顏 ", "紅衣", " 紅豆 ", "紅線 ", "青絲 ", "青史", " 青冢", " 白發", " 白首", " 白骨 ", "黃土", " 黃泉 ", "碧落", " 紫陌情深緣淺", " 情深不壽 ", "莫失莫忘" + " 陰陽相隔 ", "如花美眷", " 似水流年", " 眉目如畫", " 曲終人散", " 繁華落盡 ", "不訴離殤 ", "一世長安" ]; var info = shi[Math.floor(Math.random() * shi.length)]; //$('input[name=info]').val(); (info == '') ? info = '請填寫彈幕文字' : 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,默認隨機 /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: 錯誤發生的文件 stack: 錯誤發生時的調用堆棧 */ 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", "網上", "x戰警", "蜘蛛俠", "死侍"]; var example_item = { 'img': 'static/img/heisenberg.png', 'info': wenzi[Math.floor(Math.random() * wenzi.length)] }; $('body').barrager(example_item); return false; } </script></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
