一、代码
html + js
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> 数发直播平台 </ title> <link rel = "stylesheet" type = "text / css" href = "css / commun.css"> <link rel = "StyleSheet" type = "text / css" href = "css / style.> <script"> <script " src = "http://stating9.pplive.cn/vip/201507/pay/v_20150721174241/js/jquery.min.js"> </ script> </ head> <body id = "body"> <div> <v> <v> <a href = "javascript:;" 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> <pande data-name = "liiuxiaobao"> starof <i> </i>: </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </span> <span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </pan> </li> <pan> Span data-name = "liiuxiaobao"> starof <i> </i>: </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </span> <span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </pan> </li> <pan> Span data-name = "liiuxiaobao"> starof <i> </i>: </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </span> <span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </pan> </li> <pan> Span data-name = "liiuxiaobao"> starof <i> </i>: </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </span> <span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </pan> </li> <pan> Span data-name = "liiuxiaobao"> starof <i> </i>: </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </span> <span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </pan> </li> <pan> Span data-name = "liiuxiaobao"> starof <i> </i>: </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </span> <span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </pan> </li> <pan> Span data-name = "liiuxiaobao"> starof <i> </i>: </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </span> <span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </pan> </li> <pan> Span data-name = "liiuxiaobao"> starof <i> </i>: </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </span> <span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </pan> </li> <pan> Span data-name = "liiuxiaobao"> starof <i> </i>: </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </span> <span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </pan> </li> <pan> Span data-name = "liiuxiaobao"> starof <i> </i>: </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </span> <span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </pan> </li> <pan> Span data-name = "liiuxiaobao"> starof <i> </i>: </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </span> <span> 我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长 </pan> </li> <pan> Span data-name = "_ 11367384 @ qq"> _ 11367384 @ qq <i> </i> ： </span> <span> fasf </span> </li> </ul> </v> </div> <div> <div id = "form-wrap"> <v> <textarea name = "" ROWS = "2" Colls = "1" maxLegwerg placeholder = "请在这里输入评论" style = "affiche: aucun;"> </ textarea> <p style = "affiche: aucun;"> 0/30 </p> <div style = "affiche: aucun;"> </div> <div style = "Affichage: Block;"> <p style = "Display: Aucun;"> <a href = "javascript: vide (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: Aucun"> <em> 5 </em> 秒后可再次评论 </p> </ div> </ A href = "JavaScript: void (0);"> 发送 </a> <a href = "javascript: void (0);"> </a> <v> <ul> <li> <pan> 弹幕显示设置 </span> <div style = "position: relative;"> <span> </pan> <spany style = "position: position: position: Absolute; "> </span> </ div> <span> 50% </span> </li> <li> <span> 我的弹幕设置 </span> <v> <span> 颜色 </span> <span> #ffffff </span> <span style =" background: #ffffff "> </ span> </ div> <v> <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> </div> <! - 绑定手机提示 -> <div style = "Affichage: Aucun;"> <A href = "javascript: void (0);"> </a> <v> <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> </div> </div> </ divine $ box = $ ('. dragbar'); var $ bg = $ ('. dragbar'); var $ bgcolor = $ ('. progress'); var $ btn = $ ('. icon'); var $ text = $ ('.%'); var stattu = false; var ox = 0; var lx = 0; varft = 0; var bgleft = 0; $ btn.mousdown (e) x; = $ btn.offset (). Left; Barwidth;} $ btn.css ('gauche', gauche); $ bgcolor.width (gauche); $ text.html (parseInt (Left / Barwidth * 100) + '%');}}); $ bg.click (function (e) {if (! statu) - bgleft = $ bg. (Left <0) {Left = 0;} if (Left> Barwidth) {Left = Barwidth;} $ btn.css ('Left', Left); $ bgColor.stop (). Animate ({width: Left}, Barwidth); $ text.html (Parseint (Left / Barwidth * 100) + + '%');}});} // 发表评论 $ (". Commentaires-Area TextArea"). Focus (function () {$ ("# form-wap"). AddClass ("focus");}); $ ('. Commentaires-area textarea'). Bind ('introut propertyChange', function () {$ ('. Commentaires-area .num'). TextArea '). Val (). Longueur + "/ 30"); $ (". Commentaires-zone textarea"). blur (function () {if ($ ('. Commentaires-domaine textArea '). Val (). Length == 0) {$ ("# form-wap"). reposerlass ("focus");}}); $ (". btn-set"). Cliquez (fonction (fonction (fonction evt) {$ (". setform"). toggle (); evt.stoppropagation? evt.stoppropagation (): evt.cancelbubble = true;}); $ (". TabCon "). Cliquez sur (fonction () {if ($ (". setForm "). Is (": Visible ")) {$ (". setForm "). Hide ();}}); $ (". setForm "). C lick (function (evt) {evt.stoppropagation? evt.stoppropagation (): evt.cancelbubble = true;}); $ (". takeColor a "). cliquez (function () {$ (". rgb-set .rgb "). html (" # "+ $ (this) .attr (" data-color ")); $ (". rgb-set .color "). css (" backgroundColor ", $ (this) .css (" backgroundColor "));});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, vidéo {margin: 0; padding: 0; contour: 0; background: transparent} article, à part, boîte de dialogue, figure, pied de page, en-tête, hgroup, nav, section {affichage: block} corps, bouton, entrée, sélection, textarea {Font: 12px / 1.5 Arial, / 5b8b / 4f53, bouton sans-serif}, h1, h2, h3, h4, h5, h6, entrée, select, textarea {font-size: 100%} adresse, cite, dfn, em, var {font-style: normier} Nouveau, courrier, monospace} petit {Font-Size: 12px} li, ol, ul {list-style: Aucun} img {border: Aucun} a {text-decoration: aucun; Aucun; curseur: pointeur} a: hover {text-decoration: sous-linter} tableau {border-collapse: effondrement; border espacement: 0} .clear {clear: à la fois} .cf: après {visibilité: caché; affichage: block; font-size: 0; contenu: " "; Clear: à la fois; hauteur: 0} .fr {float: droite} .fl {float: gauche} html {-webkit-text-size-adjust: Aucun} body {font: 12px / 1.5 /5fae/8f6f/96c5/9ed1,tahoma,arial ,/5b8b/4f53,sans-serif aty.tc{text-align:centerstyle.css
.lv-wrapper {width: 990px; margin: 0 auto; clear: both;} / * 交互区域 * /. lv-right-interact {width: 310px; float: Left; position: relative;} / * 列表和评论按钮 * /. lv-right-interact-menu {width: 100%;}. lv-right-interact-menu a {float: gauche; largeur: 155px; hauteur: 40px; arrière-plan: # 000 URL (../ images / vidéos A: Hover {Border-Color: # C22; Background-Color: # 232324;}. lv-right-interact-menu .show {backgrounds position: 0px -44px;}. lv-right-interact-menu .show.now, .lv-right-interact-menu. 0PX;}. .Tabcon {hauteur: 800px; background-Color: # 232323;} / * 评论区域 * // * 评论列表 * /. barrage .chat-wrap {position: relative; hauteur: 630px; overflow-x: cachette; padding: 15px 5px 0 15px;}. Barrage .Chat-wrap-wraps 5px 5px 0 15px;}. Barrage .Chat-wrap-wraps 5px 5px 0 15px;}. Barrage .Chat-Wrap Rrorap .chat {hauteur: 630px; overflow-x: caché;}. barrage .chat li {margin: 0 0 5px; couleur: # 555;}. Barrage .Chat li Span {Color: # 3271b7; affichage: en ligne;}. Barrage .Chat Li Span.Txt {Color: # 8B8B; {couleur: # c22;}. barrage .chat li .vip {affichage: bloc en ligne; largeur: 20px; hauteur: 8px; marge: 0 0 0 5px; vertical-align: 1px; arrière .Comments-Area {Position: Absolute; Bottom: 0px; gauche: 0; largeur: 270px; rembourrage: 20px; border-top: 1px solide # 222; background-color: # 191919;}. commentaires. } .comments-area .formText textArea {width: 100%; height: 30px; redimensi: Aucun; overflow-y: Hidden; background-color: # c9c9c9; couleur: # 666; border: 0 notone;}. commentaires. {float: à droite; affichage: en ligne; largeur: 42px; hauteur: 24px; height de ligne: 24px; marge: 10px 0 0; Text-Align: Centre; Couleur: #fff; arrière-plan: # 999;}. commentaires-are. 18px; hauteur: 18px; marge: 12px 0 0; arrière-plan: URL (../ images / videoicos.png) sans répétition -206px -86px;} / * 聚焦时评论状态 * /. Commentaires-are. TextArea {Background-Color: #FFF;}. Commentaires-Area .Focus .BTn-Sumit {Background-Color: # C22;} / * 弹幕颜色 * /. Commentaires-Area .SetForm {Position: Absolute; Z-Index: 99; Color: # 999; Background: # 252525; Border: 1px Solid # 424242; Wiredth: 240px; 22px 18px 18px; top: -70px; gauche: 10px; -webkit-user-select: Aucun; moz-user-select: -moz-none; -moz-user-select: non; -o-user-select: non; -khtml-select: non; -ms-user-select: Aucun; user-select: Aucun; Affichage: aucun;}. Commentaires-Area .DM-Config {Margin: 18px 0 0 0; Affichage: Block} .Comments-Area .DM-Config Li {Hight: 90px} .comments-Area .Dm-setname {Font-Size: 14px; Color: #dedede; Font-weight: Bold; Margin-Bottom: 20px; Fonde; Block} .comments-Area .rgb-set {hauteur: 22px} .comments-area .rgb-set span {float: gauche; affichage: en ligne; couleur: # 999;}. COMMENTAIRES-ARE. # 424242; rembourrage: 0 0 0 5px} .comments-Area .Color {width: 20px; hauteur: 20px; bordure: 1px solide # d3d3d3; margin: -1px 0 0 2px} .comments-area .takecolor {width: 80px; margin: 5px 0 0 30px}. A {affichage: bloc; largeur: 16px; hauteur: 16px; float: gauche} .comments-area .dmopacity {float: droite; border-left: 1px solide # d3d3d3; padding-left: 22px} .comments-area .dragbar {width: 85px; hauteur: 10px; fond: # d3D3; 10px; curseur: par défaut} .comments - Area .Dragbar .Progress {width: 50%; Position: Absolute; hauteur: 10px; top: 0; gauche: 0; fond: # 39f} .comments-are. # 007CF7} .comments-Area .Percent {width: 85px; text-align: Center; affichage: Block; Color: # 39f} / * 登录注册后发弹幕 * /. Commentaires-area .formText .Tips {Color: # 666; Padding: 11px 0; Text-adign: Centre;}. # 39f;}. Commentaires-Area .FormText .Wait em {Color: # C22;} / * 绑定手机提示框 * /. Commentaires-Area .Pop-Phone {Position: Absolute; Left: 30px; en bas: 180px; largeur: 250px; hauteur: 140px; Box-Shadow: -2px 5px 20px #000; # 4d4d4d; z-index: 99;}. Pop-téléphone .close {position: absolu; en haut: 5px; droit: 5px; largeur: 28px; hauteur: 28px; arrière-plan: url (../ images / videoicos.png) no-repeat -233px -154px; overflow: Hidden;}. .Close: Hover {Position en arrière-plan: -205px -154px;}. Pop-Phone .Bd {margin: 10px 0 0 10px; padding: 0 0 0 20px; arrière-plan: # 4D4D4D URL (../ images / vidéoicos.png) No-repeat -255px -102px;}. 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; Affichage: en ligne; 0; line-height: 26px; text-align: Center; Color: #fff; border-radius: 2px; background: # 888;}. Pop-phone .bd pa: hover {text-decoration: non;}. Pop-phone .bd p .locked: hover {background-Color: # c22;}.二、实现
1 、效果: 点击 点击 点击 点击 设置 设置 的图标打开设置内容框 ， ， 点击其他地方关闭设置内容框。
1.1 、点击 «设置» 的图标打开设置内容框 ， 点击其他地方关闭设置内容框。
第一步: 重复点击 重复点击 重复点击 重复点击 设置 设置 图标 ， 内容框显示隐藏交替。
$ (". btn-set"). cliquez sur (fonction (evt) {$ (". setForm"). toggle (); // evt.stoppropagation? evt.stoppropagation (): evt.cancelbubble = true;});第二步 ， 点击其他区域 ， 隐藏内容框。
$ (". TabCon"). Cliquez sur (function () {if ($ (". setForm"). Is (": Visible")) {$ (". setForm"). Hide ();}});此时会有问题 ， 点击 “设置图标” 时显示不出来内容框。因为事件会冒泡 ， 点击 .btn-set 后首先显示内容框 ， 然后事件会冒泡到 .tabcon 的父元素 ， 父元素绑定了事件让显示的内容框隐藏。解决方案就是阻止事件冒泡。即把第一步中的注释取消。
$ (". btn-set"). cliquez sur (fonction (evt) {$ (". setForm"). toggle (); evt.stoppropagation? evt.stoppropagation (): evt.cancelbubble = true;});第三步 ， 点击内容区 ， 正常显示。
2 、设置内容框样式
2.1 实现 HTML 如下
<div> <ul> <li> <span> 弹幕显示设置 </span> <div style = "position: relative;"> <span> </span> <span style = "position: absolue;"> </span> </div> <span> 50% </span> </li> <li> <span> 我的弹幕设置 </span> <div> <span> </span> <pan> #ffffffr </pan> 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; couleur: # 999; fond: # 252525; bordure: 1px solide # 424242; largeur: 240px; padding: 12px 22px 18px 18px;}. Dm-Config {margin: 18px 0 0; affichage: bloc}. 90px} .dm-setname {Font-Size: 14px; couleur: #dedede; font-weight: bold; margin-boot: 20px; affichage: bloc} .rgb-set {height: 22px} .rgb-set span {float: gauche; affichage: en ligne; Color: # 999;}. 1px solide # d3d3d3; HEIGHT-HEIGHT: 18px; marge-left: 5px; couleur: # 424242; padding: 0 0 0 5px} .color {width: 20px; hauteur: 20px; bord 5px 0 0 30px} .TakeColor a {affichage: bloc; largeur: 16px; hauteur: 16px; float: gauche} .dmopacity {float: droite; border-left: 1px solide # d3d3d3; padding-left: 22px} .Dragbar {width: 85px; hight: 10px; background: # D3d3; Position: Position: Position: Hight: 10px; Background: # D3d3; relatif; marge-fond: 10px; curseur: par défaut} .Dragbar .progress {width: 50%; position: absolu; hauteur: 10px; top: 0; gauche: 0; fond: # 39f} .dragbar .icon {width: 4px; hauteur: 16px; position: absolu; top: -3px; gauche: 50%; fond: # 007cf {Largeur: 85px; Text-Align: Centre; Affichage: Bloc; Couleur: # 39F}3 、进度条百分比实现
<script> dragbar (85); fonction dragbar (barwidth) {// var $ box = $ ('. dragbar'); var $ bg = $ ('. dragbar'); var $ bgcolor = $ ('. Progress'); var $ btn = $ ('. icon'); var $ text = $ ('. 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) {gauche = e. (Left <0) {Left = 0;} if (Left> Barwidth) {Left = Barwidth;} $ btn.css ('gauche', gauche); $ bgColor.width (Left); $ text.html (parseint (Left / Barwidth * 100) + '%');}}); $ bg.click (fonction (e) {if (! {bgleft = $ bg.offset (). Left; Left = E.Pagex - Bgleft; if (Left <0) {Left = 0;} if (Left> Barwidth) {Left = Barwidth;} $ btn.css ('Left', Left); $ bgcolor.stop (). Barwidth); $ text.html (parseInt (Left / Barwidth * 100) + '%');}});} </ script>以上所述是小编给大家介绍的 JavaScript 直播评论发弹幕切图功能点集合效果代码的相关知识 ， 希望对大家有所帮助 ， 如果大家有疑问欢迎给我留言 ， 小编会及时回复大家的！