弹幕网站开发（只有前端）
生活随笔
收集整理的這篇文章主要介紹了
弹幕网站开发（只有前端）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
- index.html
- danmu.css
- danmu.js
之前學(xué)習(xí)了一段時(shí)間 HTML,css，近期簡(jiǎn)單看了一下 bootstrap,jQuery，JavaScript，于是做了彈幕網(wǎng)站練一下熟悉感覺。
原先的想法是有后端，看了一下LeanCloud感覺可以用，不過先跳票了，先把前端打完再說吧。
第一次開發(fā) Web，主要以借鑒網(wǎng)上的代碼為主，看了一下各大彈幕網(wǎng)站的界面風(fēng)格。這個(gè)樣子還是比較粗糙的，再慢慢該代碼添加功能。
項(xiàng)目地址：https://github.com/Joovo/Joovo.github.io
網(wǎng)站地址：https://joovo.xyz
最終結(jié)果如圖
index.html
說是用了bootstrap，只不過是用了一下12柵格和btn的css。
細(xì)節(jié)部分：
- 本來引入cdn,本地速度很快，掛到服務(wù)器上速度太慢了。
- js 和 jQuery代碼本來放在前面，發(fā)現(xiàn)有問題，因?yàn)闃?biāo)簽都沒有，沒辦法執(zhí)行代碼。
代碼：
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>彈幕啊</title><!-- 本來引入cdn，本地速度還可以，掛到服務(wù)器上速度就太慢了--><link rel="stylesheet" href="./bootstrap/bootstrap.min.css"><!-- jQuery文件。務(wù)必在bootstrap.min.js 之前引入 --><script src="./bootstrap/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="./bootstrap/bootstrap.min.js"></script><link rel="stylesheet" type="text/css" href="danmu.css"> </head><body><div class="container"><div class="panel"><div class="dm"><div class="dm_screen" id="dm-screen"><div class="dm_mask"></div><div class="dm_show" id="dm-show"><!-- <div>test message</div> --><div>2333</div><div>6666666666</div><div>2333</div><div>2333</div><div>2333</div><div>2333</div><div>2333</div><div>盧本偉NB!</div><div>2333</div><div>2333</div><div>盧本偉NB!</div></div></div><br><div class="send"><div class="s_fiter"><div class="s_con"><div class="row"><div class="col-md-8 col-xs-8"><input id="dm-txt" placeholder="來一發(fā)彈幕吧～" type="text" class="s_txt" /></div><div class="col-md-2 col-xs-2"><button type="button" id="btn-send" class="btn btn-block btn-info" style="margin-right:10px;"> >發(fā) 射</button></div><div class="col-md-2 col-xs-2"><button id="btn-erase" class="btn btn-block s_sub" style="margin-right:10px;"> >清 屏</button></div></div></div></div></div></div></div></div><script src="danmu.js"></script> </body></html>danmu.css
寫的有一點(diǎn)亂，有的地方弄不清直接在后面加 !important 了。
.s_txt {width: 100%;height: 34px;border-radius: 3px;border: 1px solid rgb(204, 204, 204);padding-left: 10px; }.s_sub {border: 1px solid rgb(230, 80, 30) !important;color: rgb(230, 80, 0);border-radius: 3px;text-align: center;padding: 0;height: 35px;line-height: 35px;font-size: 14px;width: 100%;background-color: white; }.s_del {border: 1px solid rgb(176, 168, 165);color: rgb(176, 168, 165);border-radius: 3px;text-align: center;padding: 0;height: 35px;line-height: 35px;font-size: 14px;width: 159px;background-color: white; }.dm {margin: 20px;text-align: center; }.dm_screen {border: 1px solid rgb(229, 229, 229); }.dm .dm_screen .dm_mask {width: 100%;height: 380px; }.dm .dm_screen .dm_show div {font-size: 22px;line-height: 36px;font-weight: 500;color: #fff;position: absolute;left: 0;top: 0; }.panel {margin: 50px;text-align: center; }body {background-image: url('ss.jpg') !important;background-size: cover; //只支持IE9+-webkit-background-size: cover; //webkit核心-moz-background-size: cover; //FF核心-o-background-size: cover; //Opera核心 }danmu.js
按鈕的監(jiān)聽，隨機(jī)顏色生成，動(dòng)畫等。
用到了 jQuery 的添加標(biāo)簽，刪除標(biāo)簽功能
用 jQuery 的 animated() 方法寫一個(gè)動(dòng)畫，從現(xiàn)在的 css 變形到設(shè)定的目標(biāo) css ，有點(diǎn)像以前玩過的一個(gè) flash 。有很多參數(shù)可以選擇。
直接去看官方文檔。
細(xì)節(jié)部分：
- 彈幕到左側(cè)后加了一個(gè)回調(diào)函數(shù)，把這個(gè)標(biāo)簽（這條彈幕）直接刪掉了
- 點(diǎn)擊發(fā)送按鈕后文本框應(yīng)該清空，直接設(shè) $("#xxx").val('') 就可以達(dá)到清空的效果了。
- jQuery 里 offsetTop，offsetLeft等的用法，得到絕對(duì)的像素值。
總結(jié)
以上是生活随笔為你收集整理的弹幕网站开发（只有前端）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android的屏幕多样性支持
- 下一篇： 解读MIUI 6背后四大布局，三层风险