一、代码
html+js
<! Doctype html> <html> <head> <meta charset = "utf-8"> <titter> 数发直播平台 </title> <link rel = "Stylesheet" type = "text/css" href = "css/common.cs"> <link Rel = "styleshet" type = "text/cs/cs" HET "HET/CSS" src = "http://static9.pplive.cn/vip/201507/pay/v_20150721174241/js/jquery.min.js"> </script> </head> <body id = "body> <div> <div> <div> <a href =" javrass = "body"> <div> <div> <div> <a href = "javrass =" body "> <div> <div> <div> <a href =;" Data-Target = "LiveProgram"> </a> <a href = "JavaScript :;" Data-Target = "Barrage"> <i> </i> </a> </div> <div> <!-弹幕-> <div> <div> <div> <ul> <li> <span data-name = "sysmsg"> 系统消息 ：: </span> <span> 欢迎进入宁夏卫视! data-name = "liiuxiaobao"> starof <i> </i>: </span> <pan> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i>: </span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> <li> <i> data-name = "liiuxiaobao"> starof <i> </i>: </span> <pan> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i>: </span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> <li> <i> data-name = "liiuxiaobao"> starof <i> </i>: </span> <pan> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i>: </span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> <li> <i> data-name = "liiuxiaobao"> starof <i> </i>: </span> <pan> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i>: </span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> <li> <i> data-name = "liiuxiaobao"> starof <i> </i>: </span> <pan> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i>: </span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> <li> <i> data-name = "liiuxiaobao"> starof <i> </i>: </span> <pan> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i>: </span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> <li> <i> data-name = "liiuxiaobao"> starof <i> </i>: </span> <pan> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i>: </span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> <li> <i> data-name = "liiuxiaobao"> starof <i> </i>: </span> <pan> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i>: </span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> <li> <i> data-name = "liiuxiaobao"> starof <i> </i>: </span> <pan> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i>: </span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> <li> <i> data-name = "liiuxiaobao"> starof <i> </i>: </span> <pan> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i>: </span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> <li> <i> data-name = "liiuxiaobao"> starof <i> </i>: </span> <pan> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i>: </span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> <li> <i> Data-name = "_ 11367384@qq"> _ 11367384@qq <i> </i>: </span> <span> fasf </span> </li> </li> </div> </div> <div> <div = "form-wrap"> <div> <textarea Name = " Pisão de placeholder = "请在这里输入评论" style = "Display: Nenhum;"> </sexttarea> <p style = "Display: None;"> 0/30 </p> <div Style = "Display: None;"> </div> <div Style = "Display: Block;"> <P Style = "NONE; data-type = "login"> 登录 </a> 或 <a href = "javascript: void (0);" data-type = "reg"> 注册 </a> 后可以发送弹幕 </p> <p> <a href = "http://passport.pptv.com/checkphone.aspx" target = "_ em branco"> 绑定手机 </a> 即可发送弹幕哦 </p> <pyle = "Display: nenhum" <em> </em> </a> href = "javascript: void (0);"> 发送 </a> <a href = "javascript: void (0);"> </a> <div> <ul> <li> </span> 弹幕显示设置 </span> <div estilo = "posição: relativa; Absolute; "> </span> </div> <pan> 50%</span> </li> <li> <span> 我的弹幕设置 </span> <div> </span> 颜色 </span> </span> #ffffffffffffff </mpan> <span style =" Background: #fffff "> </span> </div> <div> <a href =" data-color = "ff0000" style = "background:#ff0000;"> </a> <a href = "javascript :;" Data-color = "3399ff" style = "Background:#3399ff;"> </a> <a href = "Javascript :;" data-color = "00fcff" style = "Background:#00fcff;"> </a> <a href = "javascript :;" data-color = "ff9900" style = "background:#ff9900;"> </a> <a href = "javascript :;" data-color = "00ff12" style = "background:#00ff12;"> </a> <a href = "javascript :;" data-color = "fff100" style = "background:#fff100;"> </a> <a href = "javascript :;" data-color = "c8b33c" style = "background:#c8b33c;"> </a> <a href = "javascript:;" data-color = "ff0096" style = "background:#ff0096;"> </a> <a href = "javascript :;" Data-color = "8600ff" style = "Background:#8600FF;"> </a> <a href = "javascript :;" data-color = "3399ff" style = "Background:#3399ff;"> </a> </div> </li> href = "javascript: void (0);"> </a> <div> <h4> 提示 </h4> <ul> <li> 绑定完成前请不要关闭此窗口。 </li></ul> <p> <a href = "javascript: void (0);"> 已绑定手机 </a> <a href = "http://bbs.pptv.com/forum.php?mod=ViewThread&tid=31660" Target = "_ Blank"> 绑定遇到问题 </a> </p> </div> </divrg. barwidth) {// var $ box = $ ('. dragbar'); var $ bg = $ ('. dragbar'); var $ bgcolor = $ ('. Progress'); var $ btn = $ ('. icon'); var $ text = $ ('. 0; $ btn.MouseDown (função (e) {lx = $ btn.offset (). Left; // 距离浏览器左边的距离 ox = e.pagex - esquerda; statu = true;}); $ (document) .mouseup (function () {statu); = 0;} if (esquerda> barwidth) {esquerda = barwidth;} $ btn.css ('esquerda', esquerda); $ bgcolor.width (esquerda); $ text.html (parseint (esquerda / barwidth*100) + '%);}}}); $ bg.offset (). esquerda; esquerda = e.pagex - bgleft; if (esquerda <0) {left = 0;} if (esquerda> barwidth) {esquerda = barwidth;} $ btn.css ('esquerda', esquerda); $ bgcolor.STOT (). Barwidth*100) + '%');}});} // 发表评论 $ (". Comentários-área textarea"). Focus (function () {$ ("#form-wrap"). addclass ("foco");}); $ ('. .num '). html ($ ('. Comentários-área textarea '). $ (". Comentários-área textarea"). Blur (function () {if ($ ('. Comentários-área textarea '). evt) {$ (". setForm"). Toggle (); evt.stopPropagation? Evt.stopPropagation (): evt.cancelbubble = true;}); $ (". tabCon "). Clique em (function () {if ($ (". SetForm "). Is (": visível ")) {$ (". SetForm "). hide ();}}); $ (". SetForm "). C. lick (function (evt) {evt.stoppropagation? Evt.stopPropagation (): evt.cancelbubble = true;}); $ (". Takecolor a "). Clique em (function () {$ ("CSS
Common.css
article,aside,audio,blockquote,body,button,code,dd,dialog,div,dl,dt,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,legend,li,mark,menu,nav,ol,p,pre,section,table,tbody,td,textarea,tfo OT, th, tead, tempo, ul, vídeo {margem: 0; preenchimento: 0; esboço: 0; fundo: transparente} Artigo, de lado, diálogo, figura, rodapé, cabeçalho, hGroup, nav, seção {display: bloco} corpo, botão, entrada, selecione, textAea {font: 12px/1.5 Arial,/5b8b/4f53, sem serif}, H1, H2, H3, H4, H5, H6, entrada, selecione, textarea {Size: 100%} Endereço, cite, prel, fin-ffin, f-font-shy: norman}} code, kbd, prece, samp, samp, samp, samp, samp, samp, samp, samp, samp, samp, samp, samp, fin-fin, f-f-finy Novo, Courier, Monospace} Pequeno {Size da fonte: 12px} li, OL, UL {estilo de lista: nenhum} img {borda: nenhum} a {decoração de texto: nenhum; esboço: fino Nenhum; Cursor: Pointer} A: Hover {Decoração de texto: sublinhado} tabela {colapso da borda: colapso; espaçamento entre borda: 0} .clear {Clear: ambos} .cf: após {visibilidade: oculta; display: block; font-size: 0; content: " "; claro: ambos; altura: 0} .fr {float: direita} .fl {float: esquerda} html {-webkit-text-size-adjust: nenhum} corpo {font: 12px/1.5 /5fae/8f6f/96C5/9ED1,Tahoma ,/5b8b/4f53,sans-serif }.tc {text-align:center }.tl {text-align:left {text-align:right}style.css
.lv-wrapper {width: 990px; margem: 0 automático; limpo: ambos;}/*交互区域*/. LV-direto-interação {largura: 310px; float: esquerda; posição: relativa;}/*列表和评论按钮*/. lv-right-interact-menu {width: 100%;} a {float: esquerda; largura: 155px; altura: 40px; fundo: #000 url (../ imagens/videicos.png); borda-bottom: 2px Solid #313132;}. A: Hover {Border-Color:#C22; Background-Color:#232324;}. LV-interacto-menu. 0px;}. LV---IVERACT-Menu. Barrage {posição de fundo: 156px -44px;}. LV-direto-interato-menu .Barrage.now, .lv---- .tabcon {altura: 800px; cor de fundo:#232323;}/*评论区域*//*评论列表*/. barrage .chat-wrap {position: relativa; altura: 630px; overflow-x: hidden; padding: 15px 5px 0 15Px;}. .chat li {margin: 0 0 5px; cor: #555;}. Block inline; largura: 20px; altura: 8px; margem: 0 0 0 5px; alinhamento vertical: 1px; Antecedentes: url (../ imagens/videogos.png) não-repetição -228px -86px;}/*发送评论*/. .Coments-area {Posição: Absoluto; inferior: 0px; esquerda: 0; largura: 270px; preenchimento: 20px; top de borda: 1px Solid #222; Background-Color: #191919;}. C9-AREA .FORMTEXT {Position: Relity: 10px; Border: 1PX Solid #C9C9C9; } .Comments-area .FormText textAea {largura: 100%; altura: 30px; redimensione: nenhum; overflow-y: hidden; cor de fundo:#c9c9c9; cor:#666; borda: 0px;}. {float: direita; exibição: inline; largura: 42px; altura: 24px; altura da linha: 24px; margem: 10px 0 0; text-align: Center; cor: #fff; fundo: #999;}. 18px; altura: 18px; margem: 12px 0 0; Antecedentes: url (../ imagens/videicos.png) sem repetição -206px -86px;}/*聚焦时评论状态*/. Comentários-área .focus .formText {border-color:#c22; color:#1919; textarea {Background-Color: #fff;}. Comentários-área .focus .btn-submit {Background-Color: #C22;}/*弹幕颜色*/. Comentários-área .setForm {Position: Absolute; Z-Index: 99; Color: #999; Antecedentes: #252525; Border: 1px Solid Solid: 42; 18px 18px; topo: -70px; esquerda: 10px; -Webkit-user-select: nenhum; moz-user-select: -moz-none; -moz-user-selecto: nenhum; nenhum; -o-us-seleto: nenhum; -khtml-user select: nenhum; -s-er-er-seleto: nenhum; .dm-config {margin: 18px 0 0 0; display: block} .Comments-area .dm-config li {altura: 90px} .Comments-area .dm-setName {font-size: 14px; color: #dedede; font-weight: bold-bottom: 20s: 20px; 22px} .Comments-area .rgb set span {float: esquerda; exibição: embutido; cor: #999;}. Comentários-área .rgb {width: 50px; altura: 18px; borda: 1px Solid #D3D3D3; Linha-Hight: 18px; Margin-LEFT: 5px; 5px} .Comments-area .color {width: 20px; altura: 20px; borda: 1px sólido #d3d3d3; margem: -1px 0 0 2px} .Comments-area .Takecolor {width: 80px; margin: 5px 0 0 31 { 16px; altura: 16px; flutuação: esquerda} .Comments-area .dmopacity {float: direita; borda-esquerda: 1px sólido #d3d3d3; preenchimento-left: 22px} .Comments-area .DragBar {width: 85px; altura; 10px; #d3d3d3d3; padrão} .Comments-area .DragBar .Progress {Width: 50%; Posição: Absoluto; Altura: 10px; Top: 0; Esquerda: 0; Antecedentes: #39f} .Comments-Area .DragBar .iCon {Width: 4px; Hight: 16px; Posição: Absolute; Top; {Width: 85px; Text-align: Center; Display: Block; cor: #39f}/*登录注册后发弹幕*/. Comentários-área .FormText .Tips {color: #666; PADDING: 11px 0; Text-align: Center;}. .wait em {color: #c22;}/*绑定手机提示框*/. Comentários-área .pop-phone {posição: absoluto; esquerda: 30px; inferior: 180px; largura: 250px; altura: 140px; caixa-shadow: -2px 5px 20px #000; border-radius: 5px; .close {posição: absoluto; topo: 5px; direita: 5px; largura: 28px; altura: 28px; fundo: url (../ imagens/videicos.png) no-repetição -233px -154px; overflow: hidden;}. Pop-phone .close: circunda {bordoust-Position: -20; {margem: 10px 0 0 10px; preenchimento: 0 0 0 20px; fundo: #4d4d4d url (../ imagens/videicos.png) sem repetição -255px -102px;}. 0 0;}. Pop-phone .bd li {altura da linha: 22px; cor: #fff;}. Pop-phone .bd pa {float: esquerda; display: block inline; largura: 84px; altura: 26px; margin: 15px 5px 0; linha-hemeft: 26px; text-align; centro; #888;}. Pop-phone .bd pa: hover {decoração de texto: nenhum;}. Pop-phone .bd p .locked: hover {background-color: #c22;}二、实现
1 、效果 ： 点击 点击 “设置” 的图标打开设置内容框 ， 点击其他地方关闭设置内容框。 点击其他地方关闭设置内容框。
1.1 、点击 “设置” 的图标打开设置内容框 ， 点击其他地方关闭设置内容框。
第一步 ： 重复点击 重复点击 设置 设置 图标 ， ， 内容框显示隐藏交替。
$ (". btn-set"). Clique (função (evt) {$ (". setForm"). Toggle (); // evt.stopPropagation? Evt.stopPropagation (): evt.cancelbubble = true;});第二步 ， 点击其他区域 ， 隐藏内容框。
$ (". TABCON"). Clique em (function () {if ($ (". setForm"). Is (": visível")) {$ (". SetForm"). hide ();}});此时会有问题 ， 点击 点击 设置图标 设置图标 时显示不出来内容框。因为事件会冒泡 ， 点击 .btn-set 后首先显示内容框 ， 然后事件会冒泡到 .tabcon 的父元素 ， 父元素绑定了事件让显示的内容框隐藏。解决方案就是阻止事件冒泡。即把第一步中的注释取消。 父元素绑定了事件让显示的内容框隐藏。解决方案就是阻止事件冒泡。即把第一步中的注释取消。
$ (". btn-set"). Clique (função (evt) {$ (". setForm"). Toggle (); evt.StopPropagation? Evt.StopPropagation (): evt.cancelbubble = true;});第三步 ， 点击内容区 ， 正常显示。
2 、设置内容框样式
2.1 实现 html 如下
<div> <ul> <li> <lpan> 弹幕显示设置 </span> <div style = "position: relativamente;"> </span> <span style = "position: absoluto;"> </span> </div> </span> 50%</span> </li> <li> <li> <span> 我的弹幕设置 </span> <dran> </span> </li> <li> style = "Background: #ffffff"> </span> </div> <div> <a href = "javascript:;" data-color = "ff0000" style = "background:#ff0000;"> </a> <a href = "javascript :;" Data-color = "3399ff" style = "Background:#3399ff;"> </a> <a href = "Javascript :;" data-color = "00fcff" style = "Background:#00fcff;"> </a> <a href = "javascript :;" data-color = "ff9900" style = "background:#ff9900;"> </a> <a href = "javascript :;" data-color = "00ff12" style = "background:#00ff12;"> </a> <a href = "javascript :;" data-color = "fff100" style = "background:#fff100;"> </a> <a href = "javascript :;" data-color = "c8b33c" style = "background:#c8b33c;"> </a> <a href = "javascript:;" data-color = "ff0096" style = "background:#ff0096;"> </a> <a href = "javascript :;" Data-color = "8600ff" style = "Background:#8600FF;"> </a> <a href = "javascript :;" data-color = "3399ff" style = "Background:#3399FF;"> </a> </div> </li> </ul> </div>
2.2 实现 CSS 如下
/*弹幕颜色*/. SetForm {z-index: 99; cor: #999; fundo: #252525; borda: 1px sólido #424242; largura: 240px; preenchimento: 12px 22px 18px 18px;}. 90PX} .DM-SetName {Size de fonte: 14px; cor: #dedede; font-peso: negrito; margem-fundo: 20px; display: block} .rgb-set {altura: 22px} .rgb-set span {float: esquerda; exibição: inline; cor:#999; 1px Solid #d3d3d3; altura da linha: 18px; margem-esquerda: 5px; cor: #424242; preenchimento: 0 0 0 5px} .color {width: 20px; altura: 20px; borda: 1px Solid #d3d3d3; margin:-1px 0 0 2px; borda: 1px Solid #D3D3; 5px 0 0 30px} .Takecolor a {display: block; largura: 16px; altura: 16px; float: esquerda} .dmopacity {float: direita; borda-left: 1px Solid #d3d3d3; padding-left: 22px} .dragBar {width 85px; relativa; margem -bottom: 10px; cursor: padrão} .dragbar .progress {width: 50%; posição: absoluto; altura: 10px; topo: 0; esquerda: 0; fundo: #39f} .dragBar .iCon {width: 4px; altura: 16px; position}. {Width: 85px; Text-Align: Center; Display: Block; Color: #39f}3 、进度条百分比实现
<SCRIPT> DragBar (85); função DragBar (Barwidth) {// var $ box = $ ('. DragBar'); var $ bg = $ ('. DragBar'); var $ bgcolor; var = $ ('. 0; var bgleft = 0; $ btn.Mousedown (function (e) {lx = $ btn.offset (). Left; // 距离浏览器左边的距离 ox = e.pagex - esquerda; statu = true;}); $ (document). (esquerda <0) {esquerda = 0;} if (esquerda> barwidth) {esquerda = barwidth;} $ btn.css ('esquerda', esquerda); $ bgcolor.width (esquerda); $ text.html (parseInt (esquerda / barwidth*100) + '%');}; {bgleft = $ bg.offset (). esquerda; esquerda = e.pagex - bgleft; if (esquerda <0) {left = 0;} if (esquerda> barwidth) {esquerda = barwidth;} $ btn.css ('esquerda', esquerda); $ BGCOLOR.STOP (). barwidth); $ text.html (parseint (esquerda / barwidth*100) + '%');}});} </sCript>以上所述是小编给大家介绍的 JavaScript 直播评论发弹幕切图功能点集合效果代码的相关知识 ， 希望对大家有所帮助 ， 如果大家有疑问欢迎给我留言 ， 小编会及时回复大家的！