一、代码
HTML+JS
<！doctype html> <html> <head> <meta charset =“ utf-8”> <title> </title> </title> <link rel =“ stylesheet” type =“ text/css” text/css“ href =“ css/common.css”> src =“ http://static9.pplive.cn/vip/201507/pay/v_20150721174241/js/jquery.min.js”> 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 qq <i> </i>：</span> </span> <span> fasf </span> fasf </span> </span> </li> </li> </ul> </ul> </div> </div> </div> </div> <div> <div> <div> <div> <div id = div id =“占位符=“请在这里输入评论” style =“ display：none;”> </textarea> <p style =“ display：none;”> 0/30 </p> <div style =“ display：none;”> </div> </div> <div style =“ block; block;> <p style;”> <p Style =“ data-type =“登录”>登录</a> <a href =“ javascript：void（0）;” data-type =“ reg”>注册</a> </p> <p> <a href =” href =“ javaScript：void（0）;”>发送</a> <a href =“ javaScript：void（void（0）;”> </a> <div> <ul> <ul> <ul> <li> <li> <span> <span> <span> </span> </span> </span> <div style = <div style =“绝对;“> </span> </div> <span> 50％</span> </li> </li> <li> <span> <span> </span> </span> <div> <span> <span> </span> </span> <span> <span>＃#ffffff </span> <span style =“ data-color =“ ff0000” style =“背景：＃ff0000;”> </a> <a href =“ javascript ：;” data-color =“ 3399ff”样式=“背景：＃3399ff;”> </a> <a href =“ javascript ：;” data-color =“ 00fcff” style =“背景：＃00fcff;”> </a> <a href =“ javascript ：;” data-color =“ ff9900” style =“背景：＃ff9900;”> </a> <a href =“ javascript ：;” data-color =“ 00ff12” style =“背景：＃00ff12;”> </a> <a href =“ javascript ：;” data-color =“ fff100”样式=“背景：＃fff100;”> </a> <a href =“ javascript ：;” data-color =“ c8b33c” style =“背景：＃c8b33c;”> </a> <a href =“ javascript ：;” data-color =“ ff0096” style =“背景：＃ff0096;”> </a> <a href =“ javascript ：;” data-color =“ 8600ff” style =“背景：＃8600ff;”> </a> <a href =“ javascript ：;” data-color =“ 3399ff”样式=“背景：＃3399ff;”> </a> </div> </li> </li> </ul> </div> </div> </div> <！<！ - 绑定手机提示-> <div style =“ display：none display：none> <a> <a> <a href =“ javascript：void（0）;”> </a> <div> <h4> </h4> </h4> <ul> <li> <li> </li> </li> </ul> </ul> <p> <a href =“ javascript：void（void）：void（void（0）;”>已绑定手机</a> <a href="http://bbs.pptv.com/forum.php?mod=viewthread&tid=31660" target="_blank">绑定遇到问题</a></p></div></div></div></div></div></div></div></body><script>dragbar(85);function dragbar( barwidth）{// var $ box = $（'。dragbar'）; var $ bg = $（'。dragbar'）; var $ bgcolor = $（'。progress'。progress'）; var $ btn = $（'。icon'。 0; $ btn.mousedown（函数（e）{lx = $ btn.offset（）。左; //距离浏览器左边的距离ox = e.pagex -left; statu = true;}）; $（document）.mouseup（function（statu = falsive;}） = 0;} if（left> barwidth）{left = barwidth;} $ btn.css（'left'，左）; $ bgcolor.width（left）; $ text.html（parseint（parseint（left / barwidth*100） $ bg.offset（）。左; left; left = e.pagex -bgleft; if（left <0）{left = 0;} if（left> barwidth）{left = barwidth;} $ btn.css（'left'，left'，left'，left; $ bgcolor.stop（） barwidth*100） +'％'）;}}）;} //发表评论$（“。comment-area textarea”）。focus（function（）{$（“＃form-wrap”）。 。 $（“。注释 - 区域textaarea”）。blur（function（）{if（$（'。comment-area） textarea'）。val（）。长度== 0）{$（“＃form-wrap”）。removeclass（“ focus”）;}}）; $（“。btn-set”）。 evt）{$（“。setform”）。toggle（）; evt.stoppropagation？evt.stoppropagation（）：evt.cancelbubble = true;}）; $（“。 tabcon”）。单击（function（）{if（$（“。setform”）。is（“：“：可见”）））{$（“。SetForm”）。hide（）;}}）; $（“。SetForm”）。c Lick（function（evt）{evt.stoppropagation？evt.stoppropagation（）：evt.cancelbubble = true;}）; $（“。” a“）。click（function（）{$（“。rgb-set .rgb”）。html（“＃”+$（this）.attr（“ data-color”））; $（“。rgb-set .color”）。css.css（“ backgroundColor”，boundackcolor“，$（$），$（$（this）.css.css（this）CSS
common.css
文章，旁边，音频，主体，身体，按钮，代码，DD，对话框，DL，DL，DT，DT，FIELDST，FIFE，页面，表格，形式，H1，H2，H3，H4，H4，H4，H4，H6，H6，标头，HREM，HRGROUP，HR，HR，HR，LEGEND，LIGEND，LIEND，LIE，LI，LI，LI，LI，MARG，MAIN，NAV，NAV，NAV，OL，PER，PER，PER，PER，PRODY，PRODY，TABY，TABY，TABY，TABY，TDBODY，TD BODY，TD BODY，TD BODY，TFO，TFO，TFO，TFO ot，th，thead，time，ul，视频{边距：0;填充：0;概述：0;背景：透明}文章，旁边，对话框，图形，页脚，页脚，hgroup，hgroup，hGroup，hgroup，hgroup，hgroup，hav，nav，average {block} bock，按钮，按钮，输入，输入，选择，select，textarea {font：font：12px/1.5 arial,/5b8b/4f53,sans-serif}button,h1,h2,h3,h4,h5,h6,input,select,textarea{font-size:100%}address,cite,dfn,em,var{font-style:normal}code,kbd,pre,samp{font-family:courier新，快递，单拼}小{font-size：12px} li，ol，ul，ul {list-style：none} img {border：none} a {text-decoration：none; note; untline; untline：thin无;光标：指针} a：悬停{text-decoration：下划线}表{border-collapse：collapse：collapse; border-spacing：0} .clear {clear {clear {clear} .cf：acter after {vissibily {vissibility {vissibility {display; display; display; block; block; font; font; font-size; font-size：0; content; content; content; content; content; content：''; “; clear：两者;高度：0} .fr {float：right} .fl {float：left} html {-webkit-text-size-size-adjust：none} body {font：12px/1.5 /5fae/8f6f/96c5/9ed1,tahoma ,, arial，/5b8b/4f53，sans-serif} .tc {text-align：center：center} tl {text-align：left：left：left}style.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：左;宽度：155px;高度：40px;背景：＃000 url（../ images/videoicos.png）; border-bottom：2px solid＃313132;}。 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-interact-menu .show:hover{background-position:0px 0px;}。lv-right-Interact-menu .barrage {背景位置：156px -44px;}。lv-right-Interact-menu .barrage.barrage.now，.lv-right-Interact-menu .barrage .barrage .barrage .barmage .barmage .barver {hover {hover {sworkback-position {brogchand-background-position：156px 0px;}。 。 。内联块;宽度：20px;高度：8px; margin：0 0 0 5px;垂直 - align：1px;背景：url（../ images/videoicos.png）no-repeat -228px -86px -86px;}/。 。 。 。左;显示：内联;宽度：18px;高度：18px; Margin：12px 0 0;背景：url（../ images/videoicos.png）no -repeat -206px -86px;}/*聚焦时评论状态*/。 .formText {border-color：＃c22; color：＃191919; croppblack-color：#fff;}。注释-area .focus .forcus .formText textarea {croppppivent-color：#fff;}。注释-area .focus .focus .focus .focus .focus .btn-submit .btn-submit absolute;z-index:99;color: #999;background: #252525;border: 1px solid #424242;width: 240px;padding: 12px 22px 18px 18px;top: -70px;left: 10px;-webkit-user-select: none;moz-user-select: -moz-none;-moz-user-select: none;-o-user-select: none;-khtml-user-select: none;-ms-user-select: none;user-select: none;display:none;}.comments-area .dm-config {margin: 18px 0 0 0;display: block}.comments-area .dm-config li {height: 90px}.comments-area .dm-setname {font-size：14px;颜色：#dedede; font-weight：bold; margin; margin-tom：20px; display：block} .comments-area .rgb-stet {高度：22px} .comments-area .rea .rgb-set span span span span span {float：float：float：float：float; left; line; inline; inline; inline; inline; color：＃99999999999999999; 18px;border: 1px solid #d3d3d3;line-height: 18px;margin-left: 5px;color: #424242;padding: 0 0 0 5px}.comments-area .color {width: 20px;height: 20px;border: 1px solid #d3d3d3;margin: -1px 0 0 2px}.comments-area 。 。 {宽度：4px;高度：16px;位置：绝对；顶部：-3px;左：50％;背景：＃007CF7} .comments-area .percent {width {width {width：85px; text-align：text-align：center：center; display; display; display：block; block; block; block; block; color：＃39f}/＃39f}/*/。 0; text-align：center;}。注释-area .formText .tips a {padding：0 5px 0 0; color：＃39f;}。注释-area .formtext .formtext .wait em {color {color：＃c22;}/。 {position:absolute;left:30px;bottom:180px;width:250px;height:140px;box-shadow: -2px 5px 20px #000;border-radius: 5px;background: #4d4d4d;z-index:99;}.pop-phone .close {position: absolute;top: 5px;right: 5px;width: 28px;height: 28px;background:url(../images/videoicos.png) no-repeat -233px -154px;overflow: hidden;}.pop-phone .close:hover{background-position:-205px -154px;}.pop-phone .bd {margin: 10px 0 0 10px;padding: 0 0 0 20px;background: #4d4d4d URL（../ images/videoicos.png）no-repeat -255px -102px;}。pop-phone .bd h4 {font-size：14px; font-size：14px; font-weight：normal; color; color：#fff;}。pop-phone .bd ul {margin：15px 0;} pop-pop-pop-li li; 。 pa：悬停{文本 - 编写：无;}。pop-phone .bd p .locked：hover {background-color：＃c22;}二、实现
1 、效果：点击“设置”，点击其他地方关闭设置内容框。，点击其他地方关闭设置内容框。
1.1 、点击“设置”，点击其他地方关闭设置内容框。，点击其他地方关闭设置内容框。
第一步：重复点击“设置”，内容框显示隐藏交替。，内容框显示隐藏交替。
$（“。btn-set”）。单击（function（evt）{$（“。setform”）。toggle（）; // evt.stoppropagation？evt.stoppropagation（）：evt.cancelbubble = true;}）;第二步，点击其他区域，隐藏内容框。，隐藏内容框。
$（“。tabcon”）。click（function（）{if（$（“。” setform“）。is（“：cissible”）））{$（“。setform”）。hide（）;}}）;此时会有问题，点击“设置图标”时显示不出来内容框。因为事件会冒泡，点击.btn-stet后首先显示内容框
$（“。btn-set”）。单击（function（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: absolute;"></span></div><span>50%</span></li><li><span>我的弹幕设置</span><div><span>颜色</span><span>#ffffff</span><span style =“背景：#ffffff”> </span> </div> <div> <a href =“ javascript：;” data-color =“ ff0000” style =“背景：＃ff0000;”> </a> <a href =“ javascript ：;” data-color =“ 3399ff”样式=“背景：＃3399ff;”> </a> <a href =“ javascript ：;” data-color =“ 00fcff” style =“背景：＃00fcff;”> </a> <a href =“ javascript ：;” data-color =“ ff9900” style =“背景：＃ff9900;”> </a> <a href =“ javascript ：;” data-color =“ 00ff12” style =“背景：＃00ff12;”> </a> <a href =“ javascript ：;” data-color =“ fff100”样式=“背景：＃fff100;”> </a> <a href =“ javascript ：;” data-color =“ c8b33c” style =“背景：＃c8b33c;”> </a> <a href =“ javascript ：;” data-color =“ ff0096” style =“背景：＃ff0096;”> </a> <a href =“ javascript ：;” data-color =“ 8600ff” style =“背景：＃8600ff;”> </a> <a href =“ javascript ：;” data-color =“ 3399ff”样式=“背景：＃3399ff;”> </a> </div> </li> </li> </ul> </div>
2.2实现CSS如下
/。 90px} .dm-setName {font-size：14px; color：#dedede; font-weight; bold; margin; margin; margin-bottom：20px; display：block} .rgb-stet {高度：22px} .rgb-set span span span span span span span {float：float：float：float：float; left; line; inline; inline; inline; inline; color：＃99999999999999999999999999999.; 1PX实心＃D3D3D3;线路高：18px;边距：5px;颜色：＃424242;填充：0 0 0 0 5PX} .Color {width：20px; 20px; height; 20px; 20px; 20px; border：1px solid＃d3d3d3; margin：-1px 0 0 0 2ppx}。 5px 0 0 30px} .takeColor a {显示：块；宽度：16px;高度：16px; float：float：left} .dmopacity {float：float：right;右; border-left：1px solid＃d3d3d3; padding-left; padding-left：22px}} .22px} .22px} .dragbar {width：85px; 85px; 85px; repect 33; 10px; 10px; 10px; 10. relative;margin-bottom: 10px;cursor: default}.dragbar .progress {width: 50%;position: absolute;height: 10px;top: 0;left: 0;background: #39f}.dragbar .icon {width: 4px;height: 16px;position: absolute;top: -3px;left: 50%;background: #007cf7}.percent {width：85px; text-align：中心; display：block; color：＃39f}3 、进度条百分比实现
<script> dragbar（85）;功能dragbar（barwidth）{// var $ box = $（'。dragbar'）; var $ bg = $（'。dragbar'。 0; var bgleft = 0; $ btn.mousedown（function（e）{lx = $ btn.offset（）。左; //距离浏览器左边的距离ox = e.pagex -left; statu = true;}）; $（document）.mouseup（function（function（function（statu = false;}）{statu = false;}） （左<0）{left = 0;} if（left> barwidth）{left = barwidth;} $ btn.css（'left'，左）; $ bgcolor.width（left）; $ text.html（parseint（parseint） {bgleft = $ bg.offset（）。左; left; left = e.pagex -bgleft; if（left <0）{left = 0;} if（left> barwidth）{left = barwidth;} $ btn.css（'left'，left'，left'，lest; $ bgcolor.stop（$ bgcolor.stop（aint）。 barwidth）; $ text.html（parseint（左 / barwidth*100） +'％'）;}}）;} < / script>>以上所述是小编给大家介绍的javaScript直播评论发弹幕切图功能点集合效果代码的相关知识，希望对大家有所帮助，如果大家有疑问欢迎给我留言，小编会及时回复大家的！，小编会及时回复大家的！