一、代碼
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.相對;邊緣底：10px; Cursor：默認} .dragbar .progress {width：50％;位置：絕對高度：10px; top; top：0; left：0; fackack：＃39f} .dragbar} .dragbar .icon .icon .icon .icon {width：width：4px; height：4px; height; height; 16px; ables; position; poss; posts; top：00％; {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直播評論發彈幕切圖功能點集合效果代碼的相關知識，希望對大家有所幫助，如果大家有疑問歡迎給我留言，小編會及時回復大家的！ ，小編會及時回復大家的！