一、代码
html+js
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <title> 数发直播平台 </title> <link rel = "stylesheet" type = "text/css" href = "css/common.css"> <link rel = "stylesheet" type = "text/css" href = "css/stysss" src = "http://static9.pplive.cn/vip/201507/pay/v_20150721174241/js/jquery.min.js"> </script> </head> <body id = "cuerpo"> <div> <div> <div> <a href = "javascrito:"; " 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> 欢迎进入宁夏卫视! </span> </li> <li> <span data-name = "liiuxiaobao"> Starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> Starof <i> </i> ： </span> <span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> </li> <li> <span data-name = "liiuxiaobao"> Starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> Starof <i> </i> ： </span> <span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> </li> <li> <span data-name = "liiuxiaobao"> Starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> Starof <i> </i> ： </span> <span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> </li> <li> <span data-name = "liiuxiaobao"> Starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> Starof <i> </i> ： </span> <span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> </li> <li> <span data-name = "liiuxiaobao"> Starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> Starof <i> </i> ： </span> <span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> </li> <li> <span data-name = "liiuxiaobao"> Starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> Starof <i> </i> ： </span> <span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> </li> <li> <span data-name = "liiuxiaobao"> Starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> Starof <i> </i> ： </span> <span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> </li> <li> <span data-name = "liiuxiaobao"> Starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> Starof <i> </i> ： </span> <span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> </li> <li> <span data-name = "liiuxiaobao"> Starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> Starof <i> </i> ： </span> <span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> </li> <li> <span data-name = "liiuxiaobao"> Starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> Starof <i> </i> ： </span> <span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> </li> <li> <span data-name = "liiuxiaobao"> Starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> Starof <i> </i> ： </span> <span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </span> </li> <li> <span data-name = "_ 11367384@qq"> _ 11367384@qq <i> </i> ： </span> <span> fasf </span> </li> </ul> </div> </div> <div> <diM ID = "Form-wrap"> <div> <textarea name = "" Rows = "2" cols = "1" 1 "30" 30 "30". placeHolder = "请在这里输入评论" style = "Display: None;"> </Textarea> <p style = "Display: None;"> 0/30 </p> <div style = "Display: None;"> </iv> <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: Ninguno"> <em> 5 </em> 秒后可再次评论 </p> </iv> </div> href = "javascript: void (0);"> 发送 </a> <a href = "javascript: void (0);"> </a> <div> <ul> <li> <span> 弹幕显示设置 </span> <div style = "Position: relativo;"> <span> </span> <span style = "position: Absolute; "> </span> </div> <span> 50%</span> </li> <li> <span> 我的弹幕设置 </span> <div> <span> 颜色 </span> <span> #fffffff </span> <span style =" fondo: #ffffff "> </span> </div> <div> <a href =" javagurro: ";" data-color = "ff0000" style = "fondo:#ff0000;"> </a> <a href = "javascript :;" data-color = "3399ff" style = "fondo:#3399ff;"> </a> <a href = "javascript :;" data-color = "00fcff" style = "fondo:#00fcff;"> </a> <a href = "javascript :;" data-color = "ff9900" style = "fondo:#ff9900;"> </a> <a href = "javascript :;" data-color = "00ff12" style = "fondo:#00ff12;"> </a> <a href = "javascript :;" data-color = "fff100" style = "fondo:#fff100;"> </a> <a href = "javascript :;" data-color = "c8b33c" style = "fondo:#c8b33c;"> </a> <a href = "javascript :;" data-color = "ff0096" style = "fondo:#ff0096;"> </a> <a href = "javascript :;" data-color = "8600ff" style = "fondo:#8600ff;"> </a> <a href = "javascript :;" data-color = "3399ff" style = "fondo:#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 = "_ blank"> 绑定遇到问题 </a> </p> </div> </div> </iv> </div> </div> </div> </fody> <script> Dragbar (85); barwidth) {// var $ box = $ ('. 0; $ btn.MouseDown (function (e) {lx = $ btn.offset (). Left; // 距离浏览器左边的距离 ox = E.Pagex - Left; Statu = True;}); $ (documento) .MouseUp (function () {statU = false;}); $ bg.MouseMove (function (e) = 0;} if (izquierda> barwidth) {izquierda = barwidth;} $ btn.css ('izquierda', izquierda); $ bgcolor.width (izquierda); $ text.html (parseInt (izquierda / barwidth*100) + '%');}}); $ bg.click (function (e) {! Statu) {bgleft = $ bg.offset (). Left; Left = E.Pagex - Bgleft; if (Left <0) {Left = 0;} if (Left> BarWidth) {Left = BarWidth;} $ Btn.css ('Left', Left); $ BgColor.stop (). Animate ({Width: Left}, Barwidth); $ Text.html (Left (izquierda (izquierda (izquierda barwidth*100) + '%');}});} // 发表评论 $ (". .num '). Html ($ ('. $ (". Comentarios-área de textura"). Blur (function () {if ($ ('. textarea '). val (). longitud == 0) {$ ("#form-wrap"). removeClass ("foco");}}); $ (". Btn-set"). Click (function (function ( evt) {$ (". setform"). toggle (); evt.stoppropagation? evt.stoppropagation (): evt.cancelbubble = true;}); $ (". TabCon "). Click (function () {if ($ (". SetForm "). IS (": Visible ")) {$ (". SetForm "). Hide ();}}); $ (". SetForm "). C Lick (function (evt) {evt.stoppropagation? Evt.stoppropagation (): evt.cancelbubble = true;}); $ (". Takecolor a "). Click (function () {$ (".CSS
común.css
Artículo, aparte, audio, bloqueo, cuerpo, botón, código, DD, diálogo, Div, DL, DT, FieldSet, Figura, pie de página, Forma, H1, H2, H3, H4, H5, H6, Header, HGroup, HR, Legend, Li, Mark, Menu, Nav, OL, P, Pre, Sección, Tabla, TD, TD, Textarea, TFO, TFO, TFO, OT, th, thead, tiempo, ul, video {margen: 0; relleno: 0; contorno: 0; fondo: transparente} artículo, aparte, diálogo, figura, pie de página, encabezado, hgroup, nave, section {visual arial,/5b8b/4f53, sans-serif}, h1, h2, h3, h4, h5, h6, entrada, selección, textura {font-size: 100%} dirección, cite, dfn, em, var {font-style: normal} código, kbd, pre, samp {font-family: Courier Nuevo, mensajero, monoespace} pequeño {font-tamaño: 12px} li, ol, ul {list-style: none} img {border: none} a {text-decoration: none; esbozado: delgado Ninguno; Cursor: Pointer} a: Hover {Text-Decoration: Underline} table {border-colapse: colapso; border-espacio-espacio: 0} .clar {claro: ambos} .cf: después {visibilidad: oculto; display: bloque; font-size: 0; contenido: "" "; claro: ambos; altura: 0} .fr {float: derecha} .fl {float: izquierda} html {-webkit-text-size-adjust: none} body {font: 12px/1.5 /5fae/8f6f/96c5/9ed1,tahoma,arial,/5b8b/4f53,sans-serifh}.tc /text-align:centerh.tl /text-align:lefth}.tr /text-align:right}style.css
.lv-wrapper {ancho: 990px; margen: 0 auto; claro: ambos;}/*交互区域*/. lv-right-interact {ancho: 310px; float: izquierda; posición: relativa;}/*列表和评论按钮*/. LV-Right-Interact-Menu {width: 100%;}. lv-right-menuuuuuu a {float: izquierda; ancho: 155px; altura: 40px; fondo: #000 url (../ imágenes/videos.png); border-bottom: 2px sólido #313132;}. LV-right-interact-Menu .now, .lv-right-interact-menu A: Hover {Border-Color:#C22; Background-Color:#232324;}. LV-Right-Interact-Menu .Show {Background-Position: 0px -44px;}. LV-Right-Interact-Menu .show.now, .lv-Right-Right-Menu .Show: Hover {Possose de fondo: 0pxx. 0px;}. LV-Right-Interact-Menu .Barrage {Background-Position: 156px -44px;}. LV-Right-Interact-Menu .Barrage.Now, .lv-Right-Interact-Menu .Barrag .tabcon {altura: 800px; Color de fondo:#232323;}/*评论区域*//*评论列表*/. Barrage .chat-wrap {posición: relativo; altura: 630px; overflow-x: oculto; almo .chat {altura: 630px; Overflow-x: Hidden;}. Barrage .chat li {margen: 0 0 0px; color: #555;}. Barrage .chat li span {color: #3271b7; display: inline;}. Barrage .chat li span.txt {color: #8b8b8b;}. {color: #c22;}. Barrage .chat li .vip {display: inline-block; ancho: 20px; altura: 8px; margin: 0 0 0 5px; vertical-align: 1px; fondos: url (../ images/videos.png) sin repteat -228px -86px;}/*发送评论* .comments-área {posición: absoluto; fondo: 0px; izquierda: 0; ancho: 270px; padding: 20px; border-top: 1px sólido #222; de fondo de fondo: #191919;}. Comentarios-área .FormText {posición: relativo; relativo: 10px; borde: 1px sólido #c9c9c9; color de fondo: #c9c9c9c9c9; } .comments-área .FormText TextARea {ancho: 100%; altura: 30px; resiade: none; overflow-y: hidden; background-color:#c9c9c9; color:#666; borde: 0 none;}. Comentars-aza .Formtext .num {Position: Absolute; Bottom: 3px; Right: 6px; Color:#666;}.} .btn-submit {float: right; visual en línea; ancho: 18px; altura: 18px; margen: 12px 0 0 0; fondo: url (../ images/videicos.png) no-repeat -206px -86px;}/*聚焦时评论状态*/. comentarios-aurea .focus .Formtext {border-color:#c22; color:#191919; color de fondo: #fff;}.}. .FormText TextArea {Background-Color: #fff;}. Comentarios-AREA .focus .BTN-SUBMIT {Background-Color: #C22;}/*弹幕颜色*/. Comentarios-AREA .SetForm {posicion: Absolute; Z-Index: 99; Color: #999; Background: #252525; Border: 1px sólido #424242; 12px 22px 18px 18px; arriba: -70px; izquierda: 10px; -webkit-user-select: Ninguno; Moz-user-select: -moz-none; -moz-user-select: none; -o-user-select: none; -khhtml-user-select: no; -ms-user-select: none; user-select Ninguno; Display: Ninguno;}. Comentarios-área .dm-config {margin: 18px 0 0 0 0; display: block} .comments-area .dm-config li {altura: 90px} .comments-area .dm-setname {font-size: 14px; color: #dedede; font-weight: bold; margin-bottom: 20px; 5px; DISPLE block}.comments-area .rgb-set {height: 22px}.comments-area .rgb-set span {float: left;display: inline;color:#999;}.comments-area .rgb {width: 50px;height: 18px;border: 1px solid #d3d3d3;line-height: 18px;margin-left: 5px;color: #424242; Padding: 0 0 0 5px} .comments-area .color {width: 20px; altura: 20px; border: 1px sólido #d3d3d3; margin: -1px 0 0 2px} .comments-area .takecolor {width: 80px; margen: 5px 0 0 30px} .comments. a {display: block; ancho: 16px; altura: 16px; float: izquierda} .comments-area .dmopacity {float: right; border-left: 1px solid #d3d3d3; padding-left: 22px} .comments-área .dragbar {width: 85px; altura: 10px; backsing: #d3d3d3; stitiation; 10px; cursor: predeterminado} .comments-área .dragbar .progress {ancho: 50%; posición: absoluto; altura: 10px; top: 0; izquierda: 0; fondo: #39f} .comments-aarea .dragbar .icon {ancho: 4px; altura: 16px; posición: absoluto; top: -3px; 50%; fondo; fondo; fondo; #007cf7} .comments-AREA .PERENT {width: 85px; text-align: center; display: block; color: #39f}/*登录注册后发弹幕*/. Comentarios-áreas .formtext .tips {color: #666; padding: 11px 0; text-align: centro;}. #39f;}. Comentarios-área .FormText .Wait Em {Color: #c22;}/*绑定手机提示框*/. Comentarios-área .pop-phone {posición: absoluta; izquierda: 30px; fondo: 180px; ancho: 250px; altura: 140px; box shadow: -2px 5px 20px #000; border-radadradius: 5px; #4D4D4D; Z-Index: 99;}. Pop-phone .close {posición: absoluto; superior: 5px; derecha: 5px; ancho: 28px; altura: 28px; fondos: url (../ images/videos.png) sin-repeat -233px -154px; overflow: hidden;}. Pop-phonephonephonephonephonephonephone. .Close: Hover {fondo de fondo: -205px -154px;}. Pop-phone .bd {margin: 10px 0 0 10px; relleno: 0 0 0 20px; fondos: #4d4d4d url (../ images/videos.png) No-repeat -255px -102px;}. Pop-phel. 14px;font-weight: normal;color: #fff;}.pop-phone .bd ul {margin: 15px 0 0;}.pop-phone .bd li {line-height: 22px;color: #fff;}.pop-phone .bd pa {float: left;display: inline-block;width: 84px;height: 26px;margin: 15px 5px 0; línea de línea: 26px; text-align: Center; color: #fff; border-radius: 2px; fondo: #888;}. Pop-phone .bd pa: hover {text-decoration: none;}. Pop-phone .bd p .Locked: Hover {Color de fondo: #C22;}二、实现
1 、效果 ： 点击 "设置" 的图标打开设置内容框 点击其他地方关闭设置内容框。 点击其他地方关闭设置内容框。
1.1 、点击 “设置 设置” 的图标打开设置内容框 点击其他地方关闭设置内容框。 点击其他地方关闭设置内容框。
第一步 ： 重复点击 "设置" 图标 内容框显示隐藏交替。 内容框显示隐藏交替。
$ (". Btn-set"). Click (function (evt) {$ (". setform"). toggle (); // evt.stoppropagation? Evt.stoppropagation (): evt.cancelbubble = true;});第二步 ， 点击其他区域 隐藏内容框。 隐藏内容框。
$ (". TabCon"). Click (function () {if ($ (". setform"). is (": visible")) {$ (". setform"). hide ();}});此时会有问题 ， 点击 "设置图标" 时显示不出来内容框。因为事件会冒泡 ， 点击 .Btn-set 后首先显示内容框 ， 然后事件会冒泡到 .tabcon 的父元素 ， 父元素绑定了事件让显示的内容框隐藏。解决方案就是阻止事件冒泡。即把第一步中的注释取消。
$ (". Btn-set"). Click (function (evt) {$ (". setform"). toggle (); evt.stoppropagation? evt.stoppropagation (): evt.cancelbubble = true;});第三步 ， 点击内容区 正常显示。 正常显示。
2 、设置内容框样式
2.1 实现 html 如下
<ViV> <ul> <li> <span> 弹幕显示设置 </span> <div style = "posición: relativo;"> <span> </span> <span style = "posición: absoluto;"> </span> </div> <span> 50%</span> </li> <li> <li> <span> 我的弹幕设置 </pan> <div> <viv> <> 颜色 </span> <span> #ffff </span> style = "Background: #ffffff"> </span> </div> <div> <a href = "javascript :;" data-color = "ff0000" style = "fondo:#ff0000;"> </a> <a href = "javascript :;" data-color = "3399ff" style = "fondo:#3399ff;"> </a> <a href = "javascript :;" data-color = "00fcff" style = "fondo:#00fcff;"> </a> <a href = "javascript :;" data-color = "ff9900" style = "fondo:#ff9900;"> </a> <a href = "javascript :;" data-color = "00ff12" style = "fondo:#00ff12;"> </a> <a href = "javascript :;" data-color = "fff100" style = "fondo:#fff100;"> </a> <a href = "javascript :;" data-color = "c8b33c" style = "fondo:#c8b33c;"> </a> <a href = "javascript :;" data-color = "ff0096" style = "fondo:#ff0096;"> </a> <a href = "javascript :;" data-color = "8600ff" style = "fondo:#8600ff;"> </a> <a href = "javascript :;" data-color = "3399ff" style = "Background:#3399ff;"> </a> </div> </li> </ul> </div>
2.2 实现 CSS 如下
/*弹幕颜色 */ 90px} .dm-setname {font-size: 14px; color: #dedede; font-weight: bold; margin-bottom: 20px; display: block} .rgb-set {altura: 22px} .rgb-set-set {float: izquierda; display: inline; color:#999;}. Rgb {width: 50px: 18px; 18px; 18px; 18px; 18PX; 1px sólido #d3d3d3; línea-octavo: 18px; margin-izquierda: 5px; color: #424242; relleno: 0 0 0 0px} .color {width: 20px; altura: 20px; border: 1px sólido #d3d3d3; margen: -1px 0 0 2px} .takecolor {widhi 5px 0 0 0 30px} .takecolor a {display: block; ancho: 16px; altura: 16px; float: left} .dmopacity {float: right; border-left: 1px sólido #d3d3d3; padding-left: 22px} .dragbar {width: 85px; altura: 10px; fondo: #d3d3; relativo; margen -bottom: 10px; cursor: predeterminado} .dragbar .progress {ancho: 50%; posición: absoluto; altura: 10px; top: 0; izquierda: 0; fondo: #39f} .dragbar .icon {ancho: 4px; altura: 16px; posición: absoluto; top: -3px; izquierda: 50%; fondo: #007 007}. {ancho: 85px; text-align: centro; display: block; color: #39f}3 、进度条百分比实现
<script> dragbar (85); function dragbar (barwidth) {// var $ box = $ ('. 0; var bgleft = 0; $ btn.MouseDown (function (e) {lx = $ btn.offset (). Left; // 距离浏览器左边的距离 ox = E.Pagex - Left; statu = true;}); $ (document) .MouseUp (function () {statu = false;}); $ bg.MouseMove (function (e) {if ((statu) {statu = false;}); $ bg.mouseMove (function (e) {if ((statu) {statU;}); (izquierda <0) {izquierda = 0;} if (izquierda> barwidth) {izquierda = barwidth;} $ btn.css ('izquierda', izquierda); $ bgcolor.width (izquierda); $ text.html (parseint (izquierda / barwidth*100) + '%');}); $ bg.click (function (e) {if (statu) {bgleft = $ bg.offset (). Left; Left = E.Pagex - Bgleft; if (izquierda <0) {izquierda = 0;} if (Left> BarWidth) {Left = BarWidth;} $ btn.css ('izquierda', izquierda); $ bgcolor.stop (). Animate ({width: izquierda},,,,, barwidth); $ text.html (parseInt (izquierda / barwidth*100) + '%');}});} < / script>以上所述是小编给大家介绍的 Javascript 直播评论发弹幕切图功能点集合效果代码的相关知识 ， 希望对大家有所帮助 如果大家有疑问欢迎给我留言 小编会及时回复大家的！ 小编会及时回复大家的！