一、代码
HTML+JS
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> 数发直播平台 </title> <link rel = "stylesheet" type = "text/css" href = "css/cymy.css"> <link rel = "stylesheet src = "http://static9.pplive.cn/vip/201507/pay/v_20150721174241/js/jquery.min.js"> </script> </head> 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> data-name = "liiuxiaobao"> starof <i> </i>： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> data-name = "liiuxiaobao"> starof <i> </i>： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> data-name = "liiuxiaobao"> starof <i> </i>： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> data-name = "liiuxiaobao"> starof <i> </i>： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> data-name = "liiuxiaobao"> starof <i> </i>： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> data-name = "liiuxiaobao"> starof <i> </i>： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> data-name = "liiuxiaobao"> starof <i> </i>： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> data-name = "liiuxiaobao"> starof <i> </i>： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> data-name = "liiuxiaobao"> starof <i> </i>： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> data-name = "liiuxiaobao"> starof <i> </i>： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> data-name = "liiuxiaobao"> starof <i> </i>： </span> <span> 评论 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> data-name = "_ 11367384@qq"> _ 11367384@qq <i> </i>： </span> <span> fasf </span> </li> placeHolder = "请在这里输入评论" style = "แสดง: ไม่มี;"> </textarea> <p style = "แสดง: ไม่มี;"> 0/30 </p> <div style = "แสดง: ไม่มี;"> </div> <div style = "บล็อก:"> <p style = "แสดง data-type = "เข้าสู่ระบบ"> 登录 </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> <div> <ul> <li> <pan> 弹幕显示设置 </span> <div style = "ตำแหน่ง: Absolute; "> </span> </div> <span> 50%</span> </li> <li> <pan> 我的弹幕设置 </span> <div> <span> 颜色 </span> <span> #ffffff </span> <span style =" พื้นหลัง: #ffffff "> </pan> 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 = "พื้นหลัง:#00ff12;"> </a> <a href = "JavaScript:;" data-color = "fff100" style = "พื้นหลัง:#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" style = "ความเป็นมา:#3399ff;"> </a> </div> </li> </ul> </div> </div> <!-绑定手机提示-> <div style = "แสดง: ไม่มี;"> <a a href = "JavaScript: void (0);"> </a> <div> <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> barwidth) {// var $ box = $ ('. dragbar'); var $ bg = $ ('. dragbar'); var $ bgcolor = $ ('. ความคืบหน้า'); var $ btn = $ ('. ไอคอน') var $ text = $ (' 0; $ btn.mousedown (ฟังก์ชั่น (e) {lx = $ btn.offset (). ซ้าย; // 距离浏览器左边的距离 ox = e.pagex - ซ้าย; statu = true;}); $ (เอกสาร) .mouseup (ฟังก์ชั่น () {statu = false;}); = 0;} if (ซ้าย> barwidth) {left = barwidth;} $ btn.css ('ซ้าย', ซ้าย); $ bgcolor.width (ซ้าย); $ text.html (parseint (left / barwidth*100) + '%');}}); $ bg.offset (). ซ้าย; ซ้าย = e.pagex - bgleft; ถ้า (ซ้าย <0) {ซ้าย = 0;} ถ้า (ซ้าย> barwidth) {ซ้าย = barwidth;} $ btn.css ('ซ้าย', ซ้าย); barwidth*100) + '%');}});} // 发表评论 $ (". ความคิดเห็น-textarea"). โฟกัส (ฟังก์ชั่น () {$ ("#form-wrap"). addclass ("โฟกัส");}); $ (' .num '). html ($ ('. ความคิดเห็น-textarea '). val (). ความยาว+"/30"); $ (". ความคิดเห็น-textarea"). เบลอ (ฟังก์ชัน () {ถ้า ($ ('. ความคิดเห็น-พื้นที่ textarea '). val (). ความยาว == 0) {$ ("#form-wrap"). RemoveClass ("focus");}}); $ (". btn-set") คลิก (ฟังก์ชั่น (ฟังก์ชั่น ( evt) {$ (". setForm"). toggle (); evt.stoppropagation? evt.stoppropagation (): evt.cancelBubble = true;}); $ (" tabCon "). คลิก (ฟังก์ชัน () {ถ้า ($ (". setForm "). คือ (": มองเห็นได้ ")) {$ (". setForm "). ซ่อน ();}}); $ (". setForm ") เลีย (ฟังก์ชั่น (evt) {evt.stoppropagation? evt.stoppropagation (): evt.cancelbubble = true;}); $ (". takecolor a "). คลิก (ฟังก์ชัน () {$ (". rgb-set .rgb "). html ("#"+$ (นี่) .attr (" data-color ")); $ (". rgb-set .color ");CSS
Common.css
บทความ, นอกเหนือ, เสียง, blockquote, body, ปุ่ม, รหัส, dd, กล่องโต้ตอบ, div, dl, dt, fieldset, รูป, ส่วนท้าย, รูปแบบ, h1, h2, h3, h4, h5, h6, ส่วนหัว, hgroup, hr, Legend, li ot, th, thead, time, ul, วิดีโอ {margin: 0; padding: 0; โครงร่าง: 0; พื้นหลัง: โปร่งใส}, บทความ, กัน, กล่องโต้ตอบ, รูป, ส่วนท้าย, ส่วนหัว, hgroup, nav, ส่วน {display: block} body, ปุ่ม, อินพุต, select, textarea {font: 12px/1.5 Arial,/5B8B/4F53, ปุ่ม SANS-SERIF}, H1, H2, H3, H4, H5, H6, อินพุต, SELECT, TEXTAREA {FONT-SIZE: 100%} ที่อยู่, Cite, DFN, EM, VAR {FONT-Style ใหม่, Courier, Monospace} เล็ก {font-size: 12px} li, ol, ul {list-style: none} img {border: none} a {text-decoration: ไม่มี; ไม่มี; เคอร์เซอร์: ตัวชี้} a: โฮเวอร์ {การกำหนดข้อความ: ขีดเส้นใต้} ตาราง {การปิดบังชายแดน: การล่มสลาย; ระยะห่างของเส้นขอบ: 0} .clear {เคลียร์: ทั้งสอง} .cf: หลังจาก {การมองเห็น: ซ่อน; "; ชัดเจน: ทั้งสอง; ความสูง: 0} .fr {float: ขวา} .fl {float: left} html {-webkit-text-size-size: none} body {font: 12px/1.5 /5fae/8f6f/96c5/9ed1,Tahoma,arial,/5b8b/4f53,sans-serif}style.css
.lv-wrapper {width: 990px; margin: 0 auto; clear: ทั้งสอง;}/*交互区域*/. lv-right-interact {width: 310px; float: ซ้าย; ตำแหน่ง:}/*列表和评论按钮*/. A {float: ซ้าย; ความกว้าง: 155px; ความสูง: 40px; พื้นหลัง: #000 url (../ images/videoicos.png); ขอบด้านล่าง: 2px Solid #313132;}. lv-right-interact-menu. A: โฮเวอร์ {สีชายแดน:#c22; พื้นหลังสี:#232324;}. lv-right-interact-menu. Show {ตำแหน่งพื้นหลัง: 0px -44px;}. lv-right-interact-menu. show.now,. 0px;}. lv-right-interact-menu .barrage {ตำแหน่งพื้นหลัง: 156px -44px;}. lv-right-interact-menu .barrage.now, .lv-right-interact-menu. .tabcon {ความสูง: 800px; พื้นหลังสี:#232323;}/*评论区域*//*评论列表*/. Barrage. Chat-wrap {ตำแหน่ง: ญาติ; ความสูง: 630px; overflow-x: ซ่อน; .chat {ความสูง: 630px; overflow-x: hidden;}. barrage .chat li {margin: 0 0 5px; สี: #555;}. barrage. Chat Li Span {สี: #3271B7; {color: #c22;}. Barrage .chat li. vip {display: inline-block; ความกว้าง: 20px; ความสูง: 8px; ระยะขอบ: 0 0 0 5px; แนวตั้ง-แนว: 1px; พื้นหลัง: url (../ images/videoicos.png) .Comments-Area {ตำแหน่ง: Absolute; Bottom: 0PX; ซ้าย: 0; Width: 270px; Padding: 20px; Border-Top: 1px Solid #222; พื้นหลัง-สี: #191919;}. ความคิดเห็น-ส่วนหน้า. {ตำแหน่ง: ญาติ: 10px; } .Comments-area. formtext textarea {width: 100%; ความสูง: 30px; resize: none; overflow-y: hidden; พื้นหลัง-สี:#c9c9c9; สี:#666; ชายแดน: 0 ไม่มี; .Btn-Submit {Float: ขวา; แสดง: inline; width: 42px; ความสูง: 24px; จุดสูง: 24px; มาร์จิ้น: 10px 0 0; text-allign: center; color: #FFF; พื้นหลัง: #999;}. ความคิดเห็น-ความคิดเห็น inline; ความกว้าง: 18px; ความสูง: 18px; มาร์จิ้น: 12px 0 0; พื้นหลัง: url (../ images/videoicos.png) ไม่ต้องทำซ้ำ -206px -86px;}/*聚焦时评论状态*/. ความคิดเห็น-ความคิดเห็น. .FormText TextArea {พื้นหลังสี: #FFF;}. ความคิดเห็น-พื้นที่. โฟกัส .BTN-SUBMIT {พื้นหลัง-สี: #C22;}/*弹幕颜色*/. ความคิดเห็น-พื้นที่ตั้งค่า {ตำแหน่ง: Absolute; z-index: 99; สี: #999; พื้นหลัง: #252525; 240px; การตอบสนอง: 12px 22px 18px 18px; ด้านบน: -70px; ซ้าย: 10px; -webkit-user-select: ไม่มี; moz-user-select: -moz-none; -moz-user-select: ไม่มี; -o-user-select ไม่มีผู้ใช้-เลือก: ไม่มี; แสดง: ไม่มี;}. ความคิดเห็น-พื้นที่. dm-config {มาร์จิ้น: 18px 0 0 0; แสดง: บล็อก} .comments-area .dm-config li {ความสูง: 90px}. comments-are.dm-setname {font-size: 14 block} .Comments-area .rgb-set {ความสูง: 22px} .Comments-area .rgb-set span {float: ซ้าย; แสดง: inline; สี: #999;}. ความคิดเห็น-area .rgb {width: 50px; ความสูง: 18px; #424242; padding: 0 0 0 5px} .Comments-area .Color {width: 20px; ความสูง: 20px; ชายแดน: 1px ของแข็ง #d3d3d3; มาร์จิ้น: -1px 0 0 2px} .comments-area. A {display: block; width: 16px; ความสูง: 16px; float: ซ้าย} .comments-area .dmopacity {float: ขวา; ชายแดนซ้าย: 1px ของแข็ง #d3d3d3; Padding-left: 22px}. สัมพัทธ์; ขอบด้านล่าง: 10px; เคอร์เซอร์: ค่าเริ่มต้น} .Comments-area .dragbar. -Progress {ความกว้าง: 50%; ตำแหน่ง: สัมบูรณ์; ความสูง: 10px; ด้านบน: 0; ซ้าย: 0; พื้นหลัง: #39F}. #007cf7} .Comments-area. เปอร์เซ็นต์ {width: 85px; text-allign: center; display: block; สี: #39f}/*登录注册后发弹幕*/. ความคิดเห็น-area .formtext .Tips {สี: #666; padding: 11px 0; #39f;}. ความคิดเห็น-พื้นที่ฟอร์แมต. wait em {color: #c22;}/*绑定手机提示框*/. ความคิดเห็น-พื้นที่. pop-poph {ตำแหน่ง: สัมบูรณ์; ซ้าย: 30px; ด้านล่าง: 180px; width: 250px; ความสูง: 140px; #4D4D4D; z-index: 99;}. Pop-Phone .close {ตำแหน่ง: Absolute; Top: 5px; ขวา: 5px; Width: 28px; ความสูง: 28px; พื้นหลัง: url (../images/videoic.png) No-Repeat -233px -154px; .close: โฮเวอร์ {ตำแหน่งพื้นหลัง: -205px -154px;}. Pop-Phone .BD {margin: 10px 0 0 10px; padding: 0 0 0 20px; พื้นหลัง: #4D4D4D url (../ images/videoicos.png) 14px; font-weight: ปกติ; สี: #fff;}. pop-pop-bd ul {margin: 15px 0 0;}. pop-poph. bd li {line-height: 22px; color: #fff;}. pop-phone .bd pa {float: ซ้าย; 0; Line-Height: 26px; Text-Align: Center; Color: #FFF; Border-Radius: 2px; พื้นหลัง: #888;}. Pop-Phone .BD PA: Hover {การตกแต่งข้อความ: ไม่มี;二、实现
1 、效果： 点击“ 设置” 的图标打开设置内容框， 点击其他地方关闭设置内容框。
1.1 、点击“ 设置” 的图标打开设置内容框， 点击其他地方关闭设置内容框。
第一步： 重复点击“ 设置” 图标， 内容框显示隐藏交替。
$ (". btn-set") คลิก (ฟังก์ชั่น (evt) {$ (". setform"). toggle (); // evt.stoppropagation? evt.stoppropagation (): evt.cancelBubble = true;});第二步， 点击其他区域， 隐藏内容框。
$ (". tabcon") คลิก (ฟังก์ชัน () {ถ้า ($ (". setForm"). คือ (": มองเห็นได้")) {$ (". setForm"). ซ่อน ();}});此时会有问题， 点击“ 设置图标” 时显示不出来内容框。因为事件会冒泡， 点击 .btn-set 后首先显示内容框， 然后事件会冒泡到 .tabcon 的父元素， 父元素绑定了事件让显示的内容框隐藏。解决方案就是阻止事件冒泡。即把第一步中的注释取消。父元素绑定了事件让显示的内容框隐藏。解决方案就是阻止事件冒泡。即把第一步中的注释取消。
$ (". btn-set") คลิก (ฟังก์ชั่น (evt) {$ (". setform"). toggle (); evt.stoppropagation? evt.stoppropagation (): evt.cancelbubble = true;});第三步， 点击内容区， 正常显示。
2 、设置内容框样式
2.1 实现 HTML 如下
<div> <ul> <li> <span> 弹幕显示设置 </span> <div style = "ตำแหน่ง: สัมพัทธ์"> <span> </span> <span style = "ตำแหน่ง: สัมบูรณ์"> </span> </div> <span> 50%</span> </li> <li> style = "พื้นหลัง: #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 = "พื้นหลัง:#00ff12;"> </a> <a href = "JavaScript:;" data-color = "fff100" style = "พื้นหลัง:#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" style = "พื้นหลัง:#3399ff;"> </a> </div> </li> </ul> </div>
2.2 实现 CSS 如下
/*弹幕颜色*/. setform {z-index: 99; สี: #999; พื้นหลัง: #252525; ชายแดน: 1px ของแข็ง #424242; ความกว้าง: 240px; การเติม: 12px 22px 18px 18px;}. dm-config {margin: 18px 0 0 0 90px} .dm-setname {font-size: 14px; color: #dedede; font-weight: bold; margin-bottom: 20px; display: block} .rgb-set {ความสูง: 22px} .rgb-set span {float: ซ้าย; 1PX SOLID #D3D3D3; LINE-HEIGHT: 18PX; MARGIN-Left: 5PX; สี: #424242; การเติม: 0 0 0 5PX} .COLOR {WIDTH: 20PX; ความสูง: 20PX; border: 1PX ของแข็ง #D3D3D3; 5px 0 0 30px} .takecolor a {display: block; width: 16px; ความสูง: 16px; float: ซ้าย} .dmopacity {float: ขวา; border-left: 1px solid #d3d3d3; สัมพัทธ์; มาร์จิ้น -ก้น: 10px; เคอร์เซอร์: ค่าเริ่มต้น} .dragbar. -Progress {ความกว้าง: 50%; ตำแหน่ง: สัมบูรณ์; ความสูง: 10px; ด้านบน: 0; ซ้าย: 0; พื้นหลัง: #39f} .Dragbar .icon {ความกว้าง: 4px; ความสูง: 16px; {width: 85px; text-allign: center; display: block; color: #39f}3 、进度条百分比实现
<script> dragbar (85); ฟังก์ชั่น dragbar (barwidth) {// var $ box = $ ('. dragbar'); var $ bg = $ ('. dragbar'); var $ bgcolor = $ ('. progress'); 0; var bgleft = 0; $ btn.mousedown (ฟังก์ชั่น (e) {lx = $ btn.offset (). ซ้าย; // 距离浏览器左边的距离 ox = e.pagex - ซ้าย; statu = true;}); $ (เอกสาร) .mouseup (ฟังก์ชัน ({statu = talse;}; (ซ้าย <0) {left = 0;} ถ้า (ซ้าย> barwidth) {left = barwidth;} $ btn.css ('ซ้าย', ซ้าย); $ bgcolor.width (ซ้าย); $ text.html (parseint (left / barwidth*100) {bgleft = $ bg.offset (). ซ้าย; ซ้าย = E.pagex - bgleft; ถ้า (ซ้าย <0) {ซ้าย = 0;} ถ้า (ซ้าย> barwidth) {ซ้าย = barwidth;} $ btn.css ('ซ้าย', ซ้าย); barwidth); $ text.html (parseint (ซ้าย / barwidth*100) + '%');}});} </script>以上所述是小编给大家介绍的 JavaScript 直播评论发弹幕切图功能点集合效果代码的相关知识， 希望对大家有所帮助， 如果大家有疑问欢迎给我留言， 小编会及时回复大家的！