一、代码
HTML+JS
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> 数发直播平台 </title> <link rel = "styleSheet" type = "text/css" href = "css/common.css"> <link rel = "stylesheet" = "text/cs src = "http://static9.pplive.cn/vip/201507/pay/v_20150721174241/js/jquery.min.js"> </script> </head> <body id = "body"> <div> <div> <a href = "javascript:" "" "" Data-Target = "LiveProgram"> </a> <a href = "JavaScript:;" Data-Target = "Barrage"> <i> </i> </a> </div> <div> <!-弹幕-> <div> <div> <ul> <li> <span data-name = "sysmsg"> 系统消息 系统消息 ： </span> <span> 欢迎进入宁夏卫视! data-name = "liiuxiaobao"> starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </span> <pan> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> </li> <li> </i> < data-name = "liiuxiaobao"> starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </span> <pan> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> </li> <li> </i> < data-name = "liiuxiaobao"> starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </span> <pan> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> </li> <li> </i> < data-name = "liiuxiaobao"> starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </span> <pan> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> </li> <li> </i> < data-name = "liiuxiaobao"> starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </span> <pan> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> </li> <li> </i> < data-name = "liiuxiaobao"> starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </span> <pan> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> </li> <li> </i> < data-name = "liiuxiaobao"> starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </span> <pan> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> </li> <li> </i> < data-name = "liiuxiaobao"> starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </span> <pan> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> </li> <li> </i> < data-name = "liiuxiaobao"> starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </span> <pan> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> </li> <li> </i> < data-name = "liiuxiaobao"> starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </span> <pan> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> </li> <li> </i> < data-name = "liiuxiaobao"> starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </span> <pan> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> </li> <li> </i> < Data-name = "_ 11367384@qq"> _ 11367384@qq <i> </i> ： </span> <span> fasf </span> </li> </ul> </div> </div> <div> <div> <div> <div> <div> <div id = "cols-wrap"> </textareAws = "rows placeholder = "请在这里输入评论" style = "display: keine;"> </textarea> <p style = "display: keine;"> 0/30 </p> <div style = "display: keine;"> </div> <div style = "display: block;"> <p style = "display: none;"> <a href = "javascript: void (0); Data-type = "Login"> 登录 </a> 或 <a href = "JavaScript: void (0);" data-type="reg">注册</a>后可以发送弹幕</p><p ><a href="http://passport.pptv.com/checkPhone.aspx" target="_blank">绑定手机</a>即可发送弹幕哦</p><p style="display:none"><em>5</em> 秒后可再次评论</p></div></div><a href = "javaScript: void (0);"> 发送 </a> <a href = "javaScript: void (0);"> </a> <div> <ul> <li> <span> 弹幕显示设置 </span> <div style = "Position: relativ; Absolute; "> </span> </div> <span> 50%</span> </li> <li> <span> 我的弹幕设置 </span> <div> <span> 颜色 </span> <span> #ffffff </span> <span Style =" Hintergrund: #ffffff "> </span> </div> <a href =" javascript: "Javascript:" "" "" "" "" "" "" "" "" " Data-Color = "ff0000" style = "Hintergrund:#ff0000;"> </a> <a href = "JavaScript:;" Data-Color = "3399ff" style = "Hintergrund:#3399ff;"> </a> <a href = "javaScript:;" Data-Color = "00FCFF" style = "Hintergrund:#00fcff;"> </a> <a href = "javaScript:;" Data-Color = "ff9900" style = "Hintergrund:#ff9900;"> </a> <a href = "JavaScript:;" Data-Color = "00ff12" style = "Hintergrund:#00ff12;"> </a> <a href = "JavaScript:;" Data-Color = "fff100" style = "Hintergrund:#fff100;"> </a> <a href = "JavaScript:;" Data-Color = "C8B33C" style = "Hintergrund:#C8B33C;"> </a> <a href = "javaScript:;" Data-Color = "ff0096" style = "Hintergrund:#ff0096;"> </a> <a href = "JavaScript:;" Data-Color = "8600ff" style = "Hintergrund:#8600ff;"> </a> <a href = "JavaScript:;" Data-Color = "3399ff" style = "Hintergrund:#3399ff;"> </a> </div> </li> </ul> </div> </div> <!-绑定手机提示-> <div style = "display: none;"> <a 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 = "_ leer"> 绑定遇到问题 </a> </p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body> </brodbar (85). barwidth) {// var $ box = $ ('. Dragbar'); var $ bg = $ ('. Dragbar'); var $ bgcolor = $ ('. Fortschritt'); var $ btn = $ ('. icon'); var $ text = $ ('. 0; = 0;} if (links> barwidth) {links = barwidth;} $ btn.css ('links', links); $ bgcolor.width (links); $ bg.offset (). links; links = e.Pagex - bgleft; if (links <0) {links = 0;} if (linke> barwidth) {links = barwidth;} $ btn.css ('links', links); $ bgcolor.stop (). barwidth*100) + '%');}});} // 发表评论 $ (". Kommentare-Area textarea"). Focus (function () {$ ("#Form-Wrap"). .num '). $ (". Kommentare-textarea"). Blur (function () {if ($ ('. Kommentare textArea '). val (). Länge == 0) {$ ("#Form-Wrap"). RemoveClass ("Focus");}}); evt) {$ (". setform"). tabcon "). click (function () {if ($ (". setform "). Ist (": sichtbar ")) {$ (". Setform "). hide ();}}); $ (". Setform "). c lick (function (evt) {evt.stoppropagation? evt.stoppropagation (): evt.cancelBubble = true;}); $ (". TakeColor a "). click (function () {$ (". rgb-set .rgb ")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, thead, time, ul, Video {Margin: 0; Polster: 0; Umriss: 0; Hintergrund: transparent} Artikel, beiseite, Dialog, Footer, Header, Hgroup, Navigation, Abschnitt {Anzeige: Block} Körper, Schaltfläche, Eingabe, Select, TextArea {font: 12px/1.5 ARIAL,/5B8B/4F53, SANS-SERIF} Taste, H1, H2, H3, H4, H5, H6, Eingabe, Select, TextArea {Schriftgröße: 100%} Adresse, cit, dfn, em, var Neu, Kurier, Monospace} klein {Schriftgröße: 12px} li, ol, ul {Listenstil: Keine} img {Border: Keine} A {Textdekoration: Keine; Umriss: Dünn Keine; Cursor: Zeiger} A: Hover {Textdekoration: Unterstreichung} Tabelle {Border-Collapse: Collapse; Grenzabteilung: 0} .clear {klare: Beides} .cf: After {Sichtbarkeit: versteckt; Anzeige: Block; Font-Size: 0; Inhalt: "Inhalt:" Inhalt: "Inhalt:". "; klare: beide; Höhe: 0} .fr {float: rechts} .fl {float: links} html {-webkit-text-size-adjust: none} body {font: 12px/1.5 /5fae/8f6f/96C5/9ED1,tahoma,arial,/5b8b/4f53,sans-seriftestyle.css
.lv-wrapper {width: 990px; margin: 0 auto; clear: beide;}/*交互区域*/ a {float: links; Breite: 155px; Höhe: 40px; Hintergrund: #000 URL (../ Bilder/Videoicos.png); Border-Bottom: 2px Solid #313132;}. A: Hover {Border-Color:#C22; Hintergrundfarbe:#232324;}. 0px;}. .tabcon {Höhe: 800px; Hintergrundfarbe:#232323;}/*评论区域*//*评论列表*/. Barrage .Chat-Wrap {Position: Relativ; Höhe: 630px; Overflow-X: Hidden; Padding: 15px 5px 0 15px;}. Barrage .Chat. .Chat {Höhe: 630px; Überlauf-x: Hidden;}. Barrage .Chat li {Margin: 0 0 5px; Farbe: #555;}. {Farbe: #C22;}. Barrage .Chat li .VIP {Anzeige: Inline-Block; Breite: 20px; Höhe: 8px; Rand: 0 0 0 5px; vertikal-align: 1px; Hintergrund: url (../ Bilder/Videoicos. . KOMMENMENTS-AREA {Position: Absolute; unten: 0px; links: 0; Breite: 270px; Padding: 20px; Border-Top: 1px Solid #222; Hintergrundfarbe: #191919;}. Kommentare-Area .formText {Position: Relative; Padding: 10px; Border: 1px: 1PX: 1PX: 1PX: 1PX: 1PX. } .COMMENTS-AREA .FORMTEXT textArea {width: 100%; Höhe: 30px; Größe: Keine; Überlauf-y: versteckt; Hintergrundfarbe:#C9C9C9; Farbe:#666; BORE: 0 Keine;}. Kommentare. .BTN-Submit {float: rechts; Anzeige: Inline; Breite: 42px; Höhe: 24px; Zeilenhöhe: 24px; Margin: 10px 0 0; Text-Align: Mitte; Farbe: #fff; Hintergrund: #999;}. Kommentare-AREA .BTN-Submit: Hover {Text-Decoration: NICHT;}. inline;width: 18px;height: 18px;margin: 12px 0 0;background: url(../images/videoicos.png) no-repeat -206px -86px;}/*聚焦时评论状态*/.comments-area .focus .formtext{border-color:#c22;color:#191919;background-color:#fff;}.comments-area .focus .FormText textArea {Hintergrundfarbe: #fff;}. Kommentare-Area .focus .BTN-Submit {Hintergrundfarbe: #C22;}/*弹幕颜色*/. Kommentare-Area .Setform {Position: Absolute; Z-Index: 99; 12px 22px 18px 18px; Top: -70px; links: 10px; -Webkit-User-Select: None; Moz-User-Select: -moz-none; -moz-user-select: nicht; -O-user-selekt: non; Keine; Anzeige: keine;}. Kommentare-Dm-config {Margin: 18px 0 0 0; Anzeige: Block}. KOMMENTMENT-AREA .DM-CONFIG LI {Höhe: 90px}. KOMMENMENMENTS-AREA .DM-Setname {font-size: 14px; color: #deded; Block} .COMMENTS-AREA .RGB-SET {Höhe: 22px}. KOMPLEMENTS-AREA .RGB-SET SPAN {Float: links; Anzeige: Inline; Farbe: #999;}. Kommentare-Area .RGB {Breite: 50px; Höhe: 18px; Border: 1px solide #d3d3; #424242; Padding: 0 0 0 5px}. KOMPLEMENTS-AREE. a {display: block; width: 16px; Höhe: 16px; float: links}. KOMPLEMENTS-AREA .DMOPACITY {float: rechts; Border-Links: 1px Feststoff #d3d3d3; padding-links: 22px}. 10px; Cursor: Standard}. KOMMENMENT-AREA .DRAGBAR .PROGRESS {Breite: 50%; Position: absolut; Höhe: 10px; top: 0; links: 0; Hintergrund: #39f} .COMMENMENTS-AREA .DRAGBAR .ICON {WIDHTH: 4PX; #007CF7} .COMMENTMENTS-AREA .PERCYM {Breite: 85px; Text-Align: Mitte; Anzeige: Block; Farbe: #39f}/*登录注册后发弹幕*/. Kommentare-Area .formText .tips {Color: #666; Padding: 11px 0; #39f;}. Comments-area .formText .wait em #4d4d4d; Z-Index: 99;}. Pop-Phone .CLOSE {Position: absolut; top: 5px; rechts: 5px; Breite: 28px; Höhe: 28px; .CLOSE: Hover {Hintergrundposition: -205px -154px;}. Pop-Phone .bd {Margin: 10px 0 0 10px; Padding: 0 0 0 20px; Hintergrund: #4D4D4D URL (../ Images/Videoicos.png) No-Repeat -255px-102px; 14px; Schriftgewicht: Normal; Farbe: #fff;}. Pop-Phone .bd ul {Margin: 15px 0 0;}. Pop-Phone .bd li {leitungshöhe: 22px; Farbe: #fff;}. Pop-mone .bd pa {float: links; Anzeige: Inline-Hlock; Width: 84px; Höhe: 84px; Höhe: 84PX; 26px; Text-Align: Mitte; Farbe: #fff; Border-Radius: 2px; Hintergrund: #888;}. Pop-Phone .bd Pa: Hover {Textdekoration: Keine;}. Pop-Phone .bd p .Locked: Hover {Hintergrundfarbe: #C22;}二、实现
1 、效果 ： 点击 "设置" 的图标打开设置内容框 ， 点击其他地方关闭设置内容框。 点击其他地方关闭设置内容框。 点击其他地方关闭设置内容框。
1,1 、点击 "设置" 的图标打开设置内容框 ， 点击其他地方关闭设置内容框。 点击其他地方关闭设置内容框。
第一步 ： 重复点击 "设置" 图标 ， 内容框显示隐藏交替。 内容框显示隐藏交替。
$ (". Btn-set"). click (function (evt) {$ (". setform").第二步 ， 点击其他区域 ， 隐藏内容框。 隐藏内容框。
$ (". tabcon"). click (function () {if ($ (". setform"). Ist (": sichtbar") {$ (". setform"). hide ();}});此时会有问题.
$ (". Btn-set"). click (function (evt) {$ (". setform").第三步 ， 点击内容区 ， 正常显示。 正常显示。
2 、设置内容框样式
2.1 实现 html 如下
<div><ul><li><span>弹幕显示设置</span><div style="position: relative;"><span></span><span style="position: absolute;"></span></div><span>50%</span></li><li><span>我的弹幕设置</span><div><span>颜色</span><span>#ffffff</span><span style = "Hintergrund: #ffffff"> </span> </div> <div> <a href = "JavaScript:;" Data-Color = "ff0000" style = "Hintergrund:#ff0000;"> </a> <a href = "JavaScript:;" Data-Color = "3399ff" style = "Hintergrund:#3399ff;"> </a> <a href = "javaScript:;" Data-Color = "00FCFF" style = "Hintergrund:#00fcff;"> </a> <a href = "javaScript:;" Data-Color = "ff9900" style = "Hintergrund:#ff9900;"> </a> <a href = "JavaScript:;" Data-Color = "00ff12" style = "Hintergrund:#00ff12;"> </a> <a href = "JavaScript:;" Data-Color = "fff100" style = "Hintergrund:#fff100;"> </a> <a href = "JavaScript:;" Data-Color = "C8B33C" style = "Hintergrund:#C8B33C;"> </a> <a href = "javaScript:;" Data-Color = "ff0096" style = "Hintergrund:#ff0096;"> </a> <a href = "JavaScript:;" Data-Color = "8600ff" style = "Hintergrund:#8600ff;"> </a> <a href = "JavaScript:;" Data-Color = "3399ff" style = "Hintergrund:#3399ff;"> </a> </div> </li> </ul> </div>
2,2 实现 CSS 如下
/*弹幕颜色*/. Setform {z-Index: 99; Farbe: #999; Hintergrund: #252525; Grenze: 1px Feststoff #424242; Breite: 240px; Padding: 12px 22px 18px 18px; 90px}.dm-setname {font-size: 14px;color:#dedede;font-weight: bold;margin-bottom:20px;display: block}.rgb-set {height: 22px}.rgb-set span {float: left;display: inline;color:#999;}.rgb {width: 50px;height: 18px;border: 1px Solid #d3d3d3; Linienhöhe: 18px; Rand-Links: 5px; Farbe: #424242; Padding: 0 0 0 5px} .Color {width: 20px; Höhe: 20px; Border: 1px Solid #d3d3d3; margin: -1px 0 0 2px}. 30px} .TakeColor a {display: block; width: 16px; Höhe: 16px; float: links} .dmopacity {float: rechts; Border-links: 1px Feststoff #d3d3d3; padding-left: 22px} .dagbar {widthth: 85px; Höhe: 10px; 10px; Cursor: Standard} .Dagbar .Progress {Breite: 50%; Position: absolut; Höhe: 10px; ober: 0; 85px; Text-Align: Mitte; Anzeige: Block; Farbe: #39f}3 、进度条百分比实现
<Script> Dragbar (85); Funktion Dragbar (barwidth) {// var $ box = $ ('. Dragbar'); var $ bg = $ ('. Dragbar'); var $ bgcolor = $ ('. Fortschritt'); var $ btn = $ ('. icon') var $ tex = $ ('. 0; var bgleft = 0; (links <0) {links = 0;} if (links> barwidth) {links = barwidth;} $ btn.css ('links', links); $ bgcolor.width (links); {bgleft = $ bg.offset (). links; links = e.Pagex - bgleft; if (links <0) {links = 0;} if (links> barwidth) {links = barwidth;} $ btn.css ('links'; barwidth);以上所述是小编给大家介绍的 JavaScript 直播评论发弹幕切图功能点集合效果代码的相关知识 ， 希望对大家有所帮助 ， 如果大家有疑问欢迎给我留言 ， 小编会及时回复大家的！ 小编会及时回复大家的！