一、代码
HTML+JS
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> 数发直播平台 </title> <link rel = "stylesheet" type = "text/css" href = "css/common.css"> <link rel = "styles" type = "text/css" src = "http://static9.pplive.cn/vip/201507/pay/v_20150721174241/js/jquery.min.js"> </script> </head> <body id = "body"> <viv> <a href = "javascript: data-target = "liveprogram"> </a> <a href = "javaScript :؛" data-arget = "barrage"> <i> </i> </a> </viv> <viv> <!-弹幕-> <viv> <viv> <viv> <ul> <li> <span data-name = "sysmsg"> 系统消息 ： </span> 欢迎进入宁夏卫视! data-name = "liiuxioobao"> starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxioBao"> starof <i> </i> ： </span> <span> </span> </li> <li> data-name = "liiuxioobao"> starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxioBao"> starof <i> </i> ： </span> <span> </span> </li> <li> data-name = "liiuxioobao"> starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxioBao"> starof <i> </i> ： </span> <span> </span> </li> <li> data-name = "liiuxioobao"> starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxioBao"> starof <i> </i> ： </span> <span> </span> </li> <li> data-name = "liiuxioobao"> starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxioBao"> starof <i> </i> ： </span> <span> </span> </li> <li> data-name = "liiuxioobao"> starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxioBao"> starof <i> </i> ： </span> <span> </span> </li> <li> data-name = "liiuxioobao"> starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxioBao"> starof <i> </i> ： </span> <span> </span> </li> <li> data-name = "liiuxioobao"> starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxioBao"> starof <i> </i> ： </span> <span> </span> </li> <li> data-name = "liiuxioobao"> starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxioBao"> starof <i> </i> ： </span> <span> </span> </li> <li> data-name = "liiuxioobao"> starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxioBao"> starof <i> </i> ： </span> <span> </span> </li> <li> data-name = "liiuxioobao"> starof <i> </i> ： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxioBao"> starof <i> </i> ： </span> <span> </span> </li> <li> data-name = "_ 11367384@qq"> _ 11367384@qq <i> </i> ： </span> <span> fasf </span> </li> </ul> </viv> </viv> <viv> <div id = "form-wrap" <iv> placeholder = "请在这里输入评论" style = "display: none ؛"> </textarea> <p style = "display: none ؛"> 0/30 </p> <div style = "display: none ؛"> </viv> <div style = "display:"> <p style = "display: none ؛ 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 = href = "javaScript: void (0) ؛"> 发送 </a> <a href = "javaScript: void (0) ؛"> </a> <viv> <ul> <li> <span> 弹幕显示设置 </span> <div style = "position: report ؛ absolute ؛ "> </span> </viv> <span> 50 ٪ </span> </li> <li> <span> 我的弹幕设置 </span> <viv> <viv> </span> <span> #ffffff </span> <span style =" background: #ffffff "> </span> </viv> <viv> <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 = "الخلفية:#3399ff ؛"> </a> </viv> </li> </ul> </viv> </viv> <!-绑定手机提示-> <div style = "display: none ؛"> <a href = "javaScript: void (0) ؛"> </a> <viv> <h4> 提示 </h4> <ul> <li> 绑定完成前请不要关闭此窗口。 </li></ul> <p> <a href = "javaScript: void (0) ؛"> 已绑定手机 </a> <a href = "http://bbbs.pptv.com/forum.php؟mod=ViewThread&tid=31660" target = "_ blank"> 绑定遇到问题 </a> </p> </fiv> </viv> </viv> </viv> </viv> </viv> </bod> <script. barwidth) {// var $ box = $ ('. dragbar') ؛ var $ bg = $ ('. dragbar') ؛ var $ bgcolor = $ ('. 0 ؛ $ btn.mousedown (function (e) {lx = $ btn.offset (). left ؛ // 距离浏览器左边的距离 ox = = 0 ؛} if (left> barwidth) {left = barwidth ؛} $ btn.css ('اليسار' ، يسار) ؛ $ bgcolor.width (يسار) ؛ $ text.html (parseint (left / barwidth*100) + '٪')}}) ؛ $ bg.click ( $ bg.offset (). left ؛ left = e.pagex - bgleft ؛ if (left <0) {left = 0 ؛} if (left> barwidth) {left = barwidth ؛} $ btn.css ('left' ، left) ؛ $ bgcolor.stop (). barwidth*100) + '٪') ؛}}) ؛} // 发表评论 $ ( .num '). $ (". Comment-area textarea"). Blur (function () {if ($ ('. Comment-area textarea '). val (). length == 0) {$ ("#form-wrap"). removeClass ("focus") ؛}}) ؛ $ (". btn-set"). evt) {$ (". TabCon "). انقر فوق (function () {if ($ (" لعق (وظيفة (evt) {evt.stoppropagation؟ a "). انقر (function () {$ (". rgb-set .rgb ")CSS
common.css
مقال ، جانبا ، الصوت ، blockquote ، الجسم ، زر ، رمز ، DD ، مربع الحوار ، DIV ، DL ، DT ، Fieldset ، الشكل ، تذييل ، نموذج ، H1 ، H2 ، H3 ، H4 ، H5 ، H6 ، HEADER ، HGROUP ، HR ، LEGEND ، LI ، MARK ، MENA ، NAV ، P ، PRE ، SCIED ، TDOBORE ، TD ، TEDDEA ، TFO ot ، th ، thead ، time ، ul ، video {margin: 0 ؛ padding: 0 ؛ Outline: 0 ؛ background: Protectarent} ، جانبا ، حوار ، الشكل ، تذييل ، رأس ، hgroup ، nav ، القسم {display: block} body ، button ، input ، select ، textarea {font: 12px/1.5 ARIAL ،/5B8B/4F53 ، SANS-SERIF} ، H1 ، H2 ، H3 ، H4 ، H5 ، H6 ، INPUT ، SELECT ، TEXTAREA {font-size: 100 ٪} address ، cite ، dfn ، em ، var {font-font: normal} ، kbd ، pre ، samp { جديد ، Courier ، Monospace} صغير {font-size: 12px} li ، ol ، ul {style style: none} img {border: none} a {text-decoration: none ؛ Outline: thin لا شيء ؛ المؤشر: مؤشر} a: hover {text-decoration: enderline} table {border-collapse: collapse ؛ prober-space: 0} .clear {clear:} .cf: بعد {الرؤية: مخفي ؛ عرض: block ؛ font-size: 0 ؛ المحتوى: " " /5fae/8f6f/96c5/9ed1-tahoma،arial ،style.css
.lv-wrapper {width: 990px ؛ margin: 0 auto ؛ clear: كلاهما ؛}/*交互区域*/ a {float: left ؛ width: 155px ؛ الارتفاع: 40px ؛ الخلفية: #000 url (../ images/videoicos.png) ؛ border-bottom: 2px solid #313132 ؛}. a: hover {border-color:#c22 ؛ background-color:#232324 ؛}. 0px ؛}. .tabcon {الارتفاع: 800px ؛ خلفية اللون:#232323 ؛}/*评论区域*//*评论列表*/. barrage .Chat-wrap {الموضع: الارتفاع ؛ الارتفاع: 630px ؛ overflow-x: hidden ؛ padding: 15px 0 15px ؛}. .chat {الارتفاع: 630px ؛ overflow-x: hidden ؛}. barrage .Chat li {margin: 0 0 5px ؛ color: #555 ؛ {color: #c22 ؛}. barrage .Chat li .vip {display: inline-block ؛ width: 20px ؛ height: 8px ؛ margin: 0 0 0 5px ؛ allign align: 1px ؛ background: url (../ images/videicos.png) no-repeat -228px ؛ .Comments-area {الموضع: مطلق ؛ القاع: 0px ؛ اليسار: 0 ؛ العرض: 270px ؛ الحشو: 20px ؛ أعلى الحدود: 1px الصلبة #222 ؛ لون الخلفية: #191919 ؛}. التعليقات. } .comments-area. .btn-submit {float: right ؛ display: inline ؛ العرض: 42px ؛ الارتفاع: 24px ؛ خط الارتفاع: 24px ؛ الهامش: 10px 0 0 ؛ text-align: center ؛ color: #fff ؛ background: #999 ؛ Inline ؛ العرض: 18px ؛ الارتفاع: 18px ؛ الهامش: 12px 0 0 ؛ الخلفية: url (../ images/videoicos.png) no-repeat -206px -86px ؛}/*聚焦时评论状态*/. comment-area. . 12px 22px 18px 18px ؛ top: -70px ؛ اليسار: 10px ؛ -webkit-user-select: none ؛ moz-user-select: -moz-none ؛ -moz-user-select: none ؛ -o-user-select: none ؛ khtml-user-select: none ؛ لا شيء ؛ العرض: لا شيء ؛}. التعليقات. DM-Config {margin: 18px 0 0 0 ؛ display: block} .comments-area .dm-config li {height: 90px} .comments-area .dm-setname {font-size: 14px ؛ color: #dedede ؛ 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 ؛ porder: 1px solid #d3d3d3 ؛ #424242 ؛ حشوة: 0 0 0 0 5px} .comments-area. color {width: 20px ؛ الارتفاع: 20px ؛ الحدود: 1px solid #d3d3d3 ؛ margin: -1px 0 0 2px} .comments-area .takecolor {width: 80px ؛ a {display: block ؛ width: 16px ؛ height: 16px ؛ float: left} .comments-area .dmopacity {float: right ؛ border-left: 1px solid #d3d3d3 ؛ padding-left: 22px} .comments-area. dragbar {width: 85px ؛ النسبية ؛ الهامش-بوتوم: 10px ؛ المؤشر: افتراضي} .comments-area .dragbar .progress {width: 50 ٪ ؛ الموضع: المطلق ؛ الارتفاع: 10px ؛ أعلى: 0 ؛ اليسار: 0 ؛ الخلفية: #39f} .comments-area .dragbar .icon {width: 4px ؛ 50 ٪ ؛ الخلفية: #007CF7} .comments-area .percent {width: 85px ؛ text-align: center ؛ display: block ؛ color: #39f}/*登录注册后发弹幕*/. 0 0 ؛ اللون: #39f ؛}. Comments-area. #4d4d4d ؛ z-index: 99 ؛}. .Close: Hover {Background-Position: -205px -154px ؛}. 14px ؛ font-weight: normal ؛ color: #fff ؛}. pop-phone .bd ul {margin: 15px 0 0 ؛ 0 ؛ خط الارتداد: 26px ؛ النصوص النصية: المركز ؛ اللون: #fff ؛ الحدود radius: 2px ؛ الخلفية: #888 ؛}. pop-phone .bd pa: hover {text-decoration: none ؛}.二、实现
1 ： ： 点击 "设置" 的图标打开设置内容框 ， 点击其他地方关闭设置内容框。
1.1 、点击 "设置" 的图标打开设置内容框 ， 点击其他地方关闭设置内容框。
： ： 重复点击 "设置" 图标 ， 内容框显示隐藏交替。
$ (". btn-set"). انقر فوق (وظيفة (evt) {$ (".第二步 ， 点击其他区域 ， 隐藏内容框。
$ (". tabcon"). انقر فوق (function () {if ($ (".此时会有问题 ， 点击 "设置图标" 时显示不出来内容框。因为事件会冒泡 点击 点击 .btn-set 后首先显示内容框 ， 然后事件会冒泡到 .tabcon 的父元素 ， 父元素绑定了事件让显示的内容框隐藏。解决方案就是阻止事件冒泡。即把第一步中的注释取消。
$ (".第三步 ， 点击内容区 ， 正常显示。
2 、设置内容框样式
2.1 实现 HTML 如下
<viv> <ul> <li> <span> 弹幕显示设置 </span> <div style = "الموضع: النسبية ؛"> <span> </span> <span style = "الموضع: absolute ؛"> </span> </viv> <span> 50 ٪ </span> </li> <li> <li> <span> 我的弹幕设置 </span> <viv> </span> style = "background: #ffffff"> </span> </viv> <viv> <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> </viv> </li> </ul> </viv>
2.2 实现 CSS 如下
/*弹幕颜色*/. 90px} .dm-setname {font-size: 14px ؛ color: #dedede ؛ font-weight: bold ؛ margin-bottom: 20px ؛ display: block} .rgb-set {height: 22px} .rgb-set span {float: left ؛ inline ؛ coll ؛ 18px ؛ الحدود: 1px الصلبة #d3d3d3 ؛ خط الذروة: 18px ؛ الهامش-اليسار: 5px ؛ اللون: #424242 ؛ الحشو: 0 0 0 5px} .Color {Width: 20px ؛ الارتفاع: 20px ؛ الحدود: 1px Solid #d3d3d3 ؛ 80px ؛ الهامش: 5px 0 0 0 30px} .takeColor a {display: block ؛ width: 16px ؛ الارتفاع: 16px ؛ عطف: يسار} .dmopacity {float: right ؛ border-left: 1px solid #d3d3d3 ؛ padding-left: 22px}. #d3d3d3 ؛ الموضع: نسبي ؛ الهامش -بوتوم: 10px ؛ المؤشر: افتراضي} .dragbar .progress {العرض: 50 ٪ ؛ الموضع: المطلق ؛ الارتفاع: #007CF7}. Percent {width: 85px ؛ text-align: center ؛ display: block ؛ color: #39f}3 、进度条百分比实现
<script> dragbar (85) ؛ وظيفة dragbar (barwidth) {// var $ box = $ ('. dragbar') ؛ var $ bg = $ ('. dragbar') ؛ var $ bgcolor = $ ('. progress') ؛ var $ btn = $ ('. icon') 0 ؛ var bgleft = 0 ؛ $ btn.mousedown (function (e) {lx = $ btn.offset (). left ؛ // 距离浏览器左边的距离 ox = (يسار <0) {left = 0 ؛} if (left> barwidth) {left = barwidth ؛} $ btn.css ('left' ، left) ؛ $ bgcolor.width (left) ؛ $ text.html (parseint (left / barwidth*100) + '٪') ؛}}}) ؛ {bgleft = $ bg.offset (). left ؛ left = e.pagex - bgleft ؛ if (left <0) {left = 0 ؛} if (left> barwidth) {left = barwidth ؛} $ btn.css ('اليسار' ، يسار) ؛ $ bgcolor.stop (). barwidth) ؛ $ text.html (parseint (يسار / barwidth*100) + '٪') ؛}}) ؛} < / script>以上所述是小编给大家介绍的 JavaScript 直播评论发弹幕切图功能点集合效果代码的相关知识 ， 希望对大家有所帮助 ， 如果大家有疑问欢迎给我留言 ， 小编会及时回复大家的！