Jquery.barrager.js插件，可以去網上下載！下載完后，就把下載文件中的js文件、css文件、圖片文件、等等等文件全部拷貝到你們自己的項目中去,千萬別拷貝漏了，如果你怕拷貝漏了什么，那就把所有的文件夾都拷貝到你自己的項目中去！
先看我們要做成什么樣的效果：如下圖
barrage.jsp頁面
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>使用Jquery.barrager.js專業的網頁彈幕插件</title> <!-- <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> --> <link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css" media="screen" /> <link rel="stylesheet" type="text/css" href="static/css/style.css" /> <link rel="stylesheet" type="text/css" href="dist/css/barrager.css"> <link rel="stylesheet" type="text/css" href="static/pick-a-color/css/pick-a-color-1.2.3.min.css"> <link type="text/css" rel="stylesheet" href="static/syntaxhighlighter/styles/shCoreDefault.css"/> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/body.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/mark.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/console.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/js/console.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/weChatQRCode.js"></script> </head> <body style="background-color: #8FBC8F;"> <center> <h1>使用Jquery.barrager.js專業的網頁彈幕插件</h1> <a href="https://www.jianshu.com/p/24d84b207d29" target="_blank"> Web實時彈幕原理分析 </a><br><br> <a href="http://yaseng.org/jquery.barrager.js/" target="_blank"> Jquery.barrager.js彈幕插件 </a><br><br> <input type="button" value="測試json(請在瀏覽器控制台查看結果)" οnclick="testJson()"><br><br> <input id="text" type="text" style="height: 40px;"> <input type="button" value="我要吐槽(彈幕)" style="background-color: blue;" οnclick="testBarrager()"> <br><br> <input type="button" value="清除所有的彈幕" style="background-color: red;" οnclick="cleanBarrager()"> <input type="button" value="ajax從服務器端取出所有的彈幕" οnclick="showBarrage()"> <br><br> </center> </body> <script type="text/javascript" src="static/js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="static/js/bootstrap.min.js"></script> <script type="text/javascript" src="static/js/tinycolor-0.9.15.min.js"></script> <script type="text/javascript" src="dist/js/jquery.barrager.js"></script> <script type="text/javascript" src="static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="static/syntaxhighlighter/scripts/shBrushJScript.js"></script> <script type="text/javascript" src="static/syntaxhighlighter/scripts/shBrushPhp.js"></script> <script type="text/javascript" src="static/pick-a-color/js/pick-a-color-1.2.3.min.js"></script> <script type="text/javascript"> var projectPath = '${pageContext.request.contextPath}'; var item1 = { img : 'static/img/cute.png', //圖片 info : '在你的存款還沒500萬之前，你所有的理想跟愛好都應該是賺錢!', //文字 href : '', //鏈接 close : true, //顯示關閉按鈕 speed : 8, //延遲,單位秒,默認6 color : '#ffffff', //顏色,默認白色 old_ie_color : '#ffffff', //ie低版兼容色,不能與網頁背景相同,默認黑色 } $('body').barrager(item1); //彈幕 function testBarrager(){ var item2 = { img : 'static/img/cute.png', //圖片 info : '' + document.getElementById("text").value + '', //文字 href : '', //鏈接 close : true, //顯示關閉按鈕 speed : 18, //延遲,單位秒,默認6 color : '#ffffff', //顏色,默認白色 old_ie_color : '#ffffff', //ie低版兼容色,不能與網頁背景相同,默認黑色 } $('body').barrager(item2); } //清除所有的彈幕 function cleanBarrager(){ $.fn.barrager.removeAll(); } function testJson(){ var testText = document.getElementById("text").value; var jsonData = '{"message":testText, "age":"12"}'; var json = eval('(' + jsonData + ')'); console.log(json.message); } //從服務器端獲取彈幕信息並顯示所有的彈幕信息 function showBarrage() { $.ajaxSettings.async = false; $.getJSON(projectPath + '/JsonData', function(data) { //每條彈幕發送間隔 var looper_time = 3 * 1000; var items = data; //彈幕總數 var total = data.length; //是否首次執行 var run_once = true; //彈幕索引 var index = 0; //先執行一次 barrager(); function barrager() { if (run_once) { //如果是首次執行,則設置一個定時器,並且把首次執行置為false looper = setInterval(barrager, looper_time); run_once = false; } //發布一個彈幕 $('body').barrager(items[index]); //索引自增 index++; //所有彈幕發布完畢，清除計時器。 if (index == total) { clearInterval(looper); return false; } } }); } </script> </html>
名字叫JsonData的servlet
package com.jiongmeng.servlet; import java.io.IOException; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.jiongmeng.entity.Barrage; import net.sf.json.JSONArray; /** * 處理彈幕請求 */ @WebServlet("/JsonData") public class JsonData extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); //彈幕數據的集合，為了做測試方便和偷懶(懶得去數據庫中取數據)，在這里隨便造了一些彈幕實體對象數據 List<Barrage> list = new ArrayList<Barrage>(); Barrage barrage1 = new Barrage("static/img/cute.png", "666", "", true, 16, "#ffffff", "#ffffff"); Barrage barrage2 = new Barrage("static/img/cute.png", "okok", "", true, 16, "#ffffff", "#ffffff"); Barrage barrage3 = new Barrage("static/img/cute.png", "什么鬼", "", true, 16, "#ffffff", "#ffffff"); Barrage barrage4 = new Barrage("static/img/cute.png", "藍瘦香菇", "", true, 16, "#ffffff", "#ffffff"); Barrage barrage5 = new Barrage("static/img/cute.png", "好好賺錢", "", true, 16, "#ffffff", "#ffffff"); Barrage barrage6 = new Barrage("static/img/cute.png", "你們去改變世界，我只想認真賺錢", "", true, 16, "#ffffff", "#ffffff"); Barrage barrage7 = new Barrage("static/img/cute.png", "我還沒賺到500萬", "", true, 16, "#ffffff", "#ffffff"); list.add(barrage1); list.add(barrage2); list.add(barrage3); list.add(barrage4); list.add(barrage5); list.add(barrage6); list.add(barrage7); JSONArray json = JSONArray.fromObject(list); //生成符合json規范的字符串 String jsonStr = json.toString(); System.out.println(jsonStr); response.getWriter().println(jsonStr); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
Barrage類(實體類)
package com.jiongmeng.entity; /** * 彈幕實體類 * */ public class Barrage { private String img; private String info; private String href; private boolean close; private int speed; private String color; private String old_ie_color; public Barrage() { super(); } public Barrage(String img, String info, String href, boolean close, int speed, String color, String old_ie_color) { super(); this.img = img; this.info = info; this.href = href; this.close = close; this.speed = speed; this.color = color; this.old_ie_color = old_ie_color; } /** * @return the img */ public String getImg() { return img; } /** * @param img the img to set */ public void setImg(String img) { this.img = img; } /** * @return the info */ public String getInfo() { return info; } /** * @param info the info to set */ public void setInfo(String info) { this.info = info; } /** * @return the href */ public String getHref() { return href; } /** * @param href the href to set */ public void setHref(String href) { this.href = href; } /** * @return the close */ public boolean getClose() { return close; } /** * @param close the close to set */ public void setClose(boolean close) { this.close = close; } /** * @return the speed */ public int getSpeed() { return speed; } /** * @param speed the speed to set */ public void setSpeed(int speed) { this.speed = speed; } /** * @return the color */ public String getColor() { return color; } /** * @param color the color to set */ public void setColor(String color) { this.color = color; } /** * @return the old_ie_color */ public String getOld_ie_color() { return old_ie_color; } /** * @param old_ie_color the old_ie_color to set */ public void setOld_ie_color(String old_ie_color) { this.old_ie_color = old_ie_color; }