一、代码
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" type = "href =" css " src = "http://static9.pplive.cn/vip/201507/pay/v_20150721174241/js/jquery.min.js"> </scrip> </head> <body id = "body"> <div> <div> <a href = "javascript：;" data-target = "liveprogram"> </a> <a href = "javascript :;" data-target = "Barrage"> <i> </i> </a> </div> <div> <！ data-name = "liiuxiaobao"> starof <i> </i>：</span> <span> data-name = "liiuxiaobao"> starof <i> </i>：</span> <span> data-name = "liiuxiaobao"> starof <i> </i>：</span> <span> data-name = "liiuxiaobao"> starof <i> </i>：</span> <span> data-name = "liiuxiaobao"> starof <i> </i>：</span> <span> data-name = "liiuxiaobao"> starof <i> </i>：</span> <span> data-name = "liiuxiaobao"> starof <i> </i>：</span> <span> data-name = "liiuxiaobao"> starof <i> </i>：</span> <span> data-name = "liiuxiaobao"> starof <i> </i>：</span> <span> data-name = "liiuxiaobao"> starof <i> </i>：</span> <span> data-name = "liiuxiaobao"> starof <i> </i>：</span> <span> data-name = "_ 11367384@qq"> _ 11367384@qq <i> </i>：</span> <span> fasf </span> </li> </ul> </div> <div> <div> <div = "form-wrap"> <div> <textarea name = "" rows "1" "1" "1" Placeholder = "请在这里输入评论" style = "display：none;"> </textarea> <p style = "display：none;"> 0/30 </p> <div style = "display：none;"> </div> <div style = "display;"> <p style = "display：none;"> <a href = "javascript：void（0）;" 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"ターゲット= "_ blank">绑定手机</a> href = "javascript：void（0）;">发送</a> <a href = "javascript：void（0）;"> </a> <div> <ul> <li> <li> <li> <li> </span> <div style = "position：position;"> <span> </span <span <span： "ポジション：" Absolute; "> </span> </div> <span> 50％</span> </li> <li> <span>我的弹幕设置</span> <div> <span>颜色</span> <span> #ffffff </span> <span> <span> <span> < data-color = "ff0000" style = "背景：＃ff0000;"> </a> <a href = "javascript :;" data-color = "3399ff" style = "背景：＃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 = "background：＃00ff12;"> </a> <a href = "javascript :;" data-color = "fff100" style = "背景：＃fff100;"> </a> <a href = "javascript :;" data-color = "c8b33c" style = "background：＃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" style = "背景：＃3399ff;"> </a> </div> </li> </ul> </div> </div> <！ href = "javascript：void（0）;"> </a> <div> <h4>提示</h4> <ul> <li> </li> </ul> <p> <p> <p> <p> <a href = "javascript：void（0）;">已绑定手机</a> <a href = "http://bbs.pptv.com/forum.php?mod=viewthread&tid=31660"ターゲット= "_ blank"> div> div> </div> </div> </div barwidth）{// var $ box = $（ '。dragbar'）; var $ bg = $（ '。dragbar'）; var $ bgcolor = $（ '。progress'）; var $ btn = $（ '。アイコン」 0; $ btn.Mousedown（function（e）{lx = $ btn.offset（）。 = 0;} if（left> barwidth）{left = barwidth;} $ btn.css（ 'left'、left）; $ bgcolor.width（左）; $ text.html（parseint（left / barwidth*100） + '％'）;}}）; $ bg.offset（）。左; left = e.pagex -bgleft; if（left <0）{left = 0;} if（left> barwidth）{left = barwidth;} $ btn.css（ 'left'、left）; $ bgcolor.stop（）。 Barwidth*100） + '％'）;}} .num '）。html（$（'。コメントエリアTextarea '）。 $（ "。comments-area textarea"） textarea '）。val（）。length == 0）{$（ "＃form-wrap"）。removeclass（ "focus"）;}}）; $（ "。btn-set"）。 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（）{$（"。rgb-set .rgb "）。html（"＃ "+$（this）.attr（" data-color "））CSS
common.css
記事はさておき、オーディオ、ブロッククォート、ボディ、ボタン、コード、DD、ダイアログ、Div、DL、DT、フィールドセット、フィギュア、フッター、フォーム、H1、H2、H3、H4、H5、H6、ヘッダー、HGROUP、HR、伝説、LI、マーク、メニュー、NAV、OL、P、PRE、テーブル、TD、TD、TD、TDEAREA、TFO ot、th、thead、time、ul、video {margin：0; padding：0; outline：0; background：transparent} article、ad、dialog、figure、footer、header、hgroup、nav、section {display：block}ボディ、入力、select、textarea {font：12px/1.5 Arial、/5B8B/4F53、SANS-SERIF}ボタン、H1、H2、H3、H4、H5、H6、入力、選択、TextArea {font-size：100％}アドレス、引用、DFN、EM、em、em、{font-style：normal}コード、kbd、pre、samp {font-family：couriier New、Courier、Monospace} Small {font-size：12px} li、ol、ul {list-style：none} img {border：none} a {text-decoration：none; outline：thinなし;カーソル：ポインター} a：hover {Text-decoration：underline} Table {border-collapse：collapse; border-spacing：0} .clear {clear：blote} .cf：after {vidibility：hisdibility：hidhing; display：block; font-size：0; content： "" "; clear：blote; height：0} .fr {float：right} .fl {float：left} html {-webkit-text-size-adjust：none} body {font：12px/1.5 /5fae/8f6f/96c5/9ed1、tahoma、arial、/5b8b/4f53,sans-serif} .tc {text-align：conter} .tl {text-align：left} .tr {text-align：rign：}style.css
.lv-wrapper {width：990px; margin：0 auto; clear：blote;}/*交互区域*/。lv-right-interact {width：310px; float：float：left; position：relative;}/*/。lv-right-interact-menu {width：100％;} {float：left; width：155px; height：40px; background：＃000 url（../ images/videocos.png）; border-bottom：2px solid＃313132;} A：Hover {border-color：＃c22; background-color：＃232324;}。lv-right-interact-menu .show {background-position：0px -44px;} 0px;}。lv-right-interact-menu .barrage {background-position：156px -44px;} .tabcon {height：800px; background-color：＃232323;}/*评论区域*//*评论列表*/。barrage .chat-wrap {position：relative; height：630px; hidden; padding：15px 5px 0 15px;} .chat {height：630px; anoverflow-x：hidden;}。弾幕.chat li {margin：0 0 5px; color：＃555;}。 ＃c22;}。バラージ.chat li .vip {display：inline-block; width：20px; height：8px; margin：0 0 0 5px; vertical-align：1px; backgracus：url（../ videocos.png）no-repeat -228px -86px;}/*发送评论*/。 .comments-area {aspotion：absolute; bottom：0px; left：0; width：270px; padding：20px; border-top：1px solid＃222; background-color：＃191919;}。 } .comments-area .formtext textarea {width：100％; height：30px; resize：none; anoverflow-y：hiddeny; background-color：＃c9c9c9; color：＃666; border：0 none;}。コメントエリア.Formtext .num {num {position：botion; .btn-submit {float：right; display：inline; width：42px; height：24px; line-height：24px; margin：10px 0 0; text-align：color：#fff; cloughth：＃999;}。commention-area .btn-submit：hover {ext-decoration：none;}。インライン;幅：18px;高さ：18px;マージン：12px 0 0;背景：url（../ images/videocos.png）no-repeat -206px -86px;}/*聚焦时评论状态*/。コメントエリア.focus .formtext {border-color：＃c22; .FormText Textarea {background-color：#fff;}。comments-area .focus .focus {background-color：＃c22;}/*弹幕颜色*/。コメントエリア{位置：絶対; z-index：99; color：＃999; 240px;パディング：12px 22px 18px 18px; top：-70px; left：10px; -webkit-user-select：none; moz-user-select：-moz-user-select：none; -o-user-select：none; -none-select：なし;なし;ディスプレイ：なし;}。コメントエリア.dm-config {マージン：18px 0 0 0; display：block} .comments-area .dm-config li {height：90px} .comments-area .dm-setname {font-size：14px; color：#dededed; font-weight; .rgb-set {height：22px} .comments-area .rgb-set span {float：float：display：inline; color：＃999;}。コメントエリア.rgb {width：50px; height：18px; border：1px solid＃d3d3d3; line-heigh：18px; magris 0 0 0 5px} .comments-area .color {width：20px; height：height：20px; border：1px solid＃d3d3d3; margin：-1px 0 0 2px} .comments-area .takecolor {width：80px; margin：5px 0 0 30px}。 16px; height：16px; float：left} .comments-area .dmopacity {float：right：border-left：1px solid＃d3d3d3; padding-left：22px} .comments-area .dragbar {width：85px; height：10px; default} .comments-area .dragbar .progress {width：50％; position：aspolute; height; height：10px; top：0; left：0; background：＃39f} .comments-area .dragbar .icon {width：4px; height：16px; position：absoct; top：50％; read：50％; .percent {width：85px; text-align：center; display：block; color：＃39f}/*登录注册后发弹幕*/。comments-area .formtext .tips {color：＃666; padding：11px 0; text-align：center;}。 .formtext .wait em {color：＃c22;}/*绑定手机提示框*/。コメントエリア{位置：絶対;左：30px;下：180px; wid：250px; height：140px; box-shadow：-2px 5px 20px＃000; border-radius：5px; ＃4d4d4d; z-index：99;}。ポップフォン.close {position：aspolute：aspolute; top：5px; right：5px; width：28px; height：28px; backgrawuth：url（../ yimase/videocos.png）No-repeat -2333px -154px; Overflow：hidden;}。 .close：hover {background-position：-205px -154px;}。pop-phone .bd {margin：10px 0 0 10px; padding：0 0 0 20x; background：＃4d4d4d url（../ images/videocos.png）No-Repeat -255px -102px; 14px; font-weight：normal; color：#fff;}。ポップフォン.bd UL {マージン：15px 0 0;}。 26px; Text-align：center; color：#fff; border-radius：2px; background：＃888;}。pop-phone .bd pa：hover {text-decoration：none;}。pop-phone .bd p .locked：hover {background-color：＃c22;}二、实现
1 、效果：点击“设置”的图标打开设置内容框、点击其他地方关闭设置内容框。
1.1 、点击「设置」的图标打开设置内容框、点击其他地方关闭设置内容框。
第一步：重复点击「设置」图标、内容框显示隐藏交替。
$（ "。btn-set"）
第二步、点击其他区域、隐藏内容框。
$（ "。tabcon"）。クリック（function（）{if（$（ "。setform"）。is（ "：visible"））{$（ "。setform"）。hide（）;}}）;此时会有问题、点击、「设置图标」时显示不出来内容框。因为事件会冒泡、点击、.btn-set后首先显示内容框、然后事件会冒泡到、然后事件会冒泡到、t、父元素绑定了事件让显示的内容框隐藏。解决方案就是阻止事件冒泡。即把第一步中的注释取消。
$（ "。btn-set"）
第三步、点击内容区、正常显示。
2 、设置内容框样式
2.1 html如下
<div> <ul> <li> <span> </span> <div style = "position：" relative; "> <span> </span> <span style =" position：aspolute; "> </span> </div> <span> 50％</li> <li> <li> <li> <span>我的弹幕设置</span> <span style = "background：#ffffff"> </span> </div> <div> <a href = "javascript :;" data-color = "ff0000" style = "背景：＃ff0000;"> </a> <a href = "javascript :;" data-color = "3399ff" style = "背景：＃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 = "background：＃00ff12;"> </a> <a href = "javascript :;" data-color = "fff100" style = "背景：＃fff100;"> </a> <a href = "javascript :;" data-color = "c8b33c" style = "background：＃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" style = "背景：＃3399ff;"> </a> </div> </li> </ul> </div>
2.2实现CSS如下
/*弹幕颜色*/。setform {z-index：99; color：＃999; background：＃252525; border：1px solid＃424242; width：240px; padding：12px 22px 18px 18px;}。dm-config {magran 90px} .dm-setname {font-size：14px; color：#dedede; font-weight：bold; margin-bottom：20px; display：block} .rgb-setスパン{height：22px}。 1PX SOLID＃D3D3D3; LINE-HEIGHT：18PX; MARGIN-LEFT：5PX; COLOR：＃424242; PADDING：0 0 0 5PX} .COLOR {width：20px; height; height：20px; border：border：1px solid＃d3d3d3; 0 30px} .takecolor a {display：block; width：16px; height：16px; float：left} .dmopacity {float：right; border-left：1px solid＃d3d3d3; padding-left：22px} .dragbar {width：85px; height; 10px; cursor：default} .dragbar .progress {width：50％; position：absolute; height; height：10px; top：0; left：0; background：＃39f} .dragbar .icon {width：4px; height：16px; position：aubsulute; top：-3px; left：＃007cf7}。 85px; Text-align：center; display：block; color：＃39f}3 、进度条百分比实现
<script> dragbar（85）; function dragbar（barwidth）{// var $ box = $（ '。dragbar'）; var $ bg = $（ '。dragbar'）; var $ bgcolor = $（ '。progress'）; var $ btn = $（ '。Icon'）; var $ '; var ox）; var $'; var $ '; var $'; var $ '; var $'; var $ '; var stat = 0; 0; var bgleft = 0; $ btn.mousedown（function（e）{lx = $ btn.offset（）。 （左<0）{左= 0;} if（left> barwidth）{left = barwidth;} $ btn.css（ 'left'、left）; $ bgcolor.width（左）; $ text.html（parseint（left / barwidth*100） + '％'）; {bgleft = $ bg.offset（）。左;左;左= e.pagex -bgleft; if（left <0）{left = 0;} if（left> barwidth）{left = barwidth;} $ btn.css（ 'left'、left）; barwidth）; $ text.html（parseint（左 / barwidth*100） + '％'）;}}）;} < / script>以上所述是小编给大家介绍的javascript直播评论发弹幕切图功能点集合效果代码的相关知识、希望对大家有所帮助、如果大家有疑问欢迎给我留言、小编会及时回复大家的！