一、代码
HTML+JS
<! docType html> <html> <head> <meta charset = "utf-8"> <title> </title> <link rel = "stylesheet"type = "text/css"href = "css/common.cs"> in link rel = "stylesheet"type "text/css"href = "css/sys"> css src = "http://static9.pplive.cn/vip/201507/pay/v_20150721174241/js/jquery.min.js"> </script> </head> <body id = "body"> <div> <div> <div> <a href = "javascript :;" data-target = "liveprogram"> </a> <a href = "javaScript :;" data-target = "barrage"> <i> </i> </a> </div> <div> <!-弹幕-> <div> <div> <li> <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> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </span> <span> 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </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> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </span> <span> 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </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> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </span> <span> 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </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> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </span> <span> 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </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> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </span> <span> 1 </span> </li> <li> <span data-name = "liiuxiaobao"> starof <i> </i> ： </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> </li> <li> <span data-name = "_ 11367384@qq"> _ 11367384@qq <i> </i> ： </span> </span> fasf </span> </li> </ul> </div> <div> <div id = "form-wrap"> <div> <textarea name = ""rows = ""1 "1"1 ""rows = "2" 자리 표시기 = "" "style ="display : none; ">"> ">"> "> </textRea> <p style ="display : none; "> 0/30 </p> <div style ="display : none; "> </div> <div style ="display : "> <p style ="display : none; "> <a href ="javascript (0); " data-type = "로그인"> 登录 </a> <a href = "javaScript : void (0);" data-type = "reg"> </a> </a> </p> <p> <a href = "http://passport.pptv.com/checkphone.aspx"_ blank "> 绑定手机 </a> 即可发送弹幕哦 </p> <p style ="display : none "> <em> 5 </em> </div> </div> </div> <a href = "javaScript : void (0);"> 发送 </a> <a href = "javaScript : void (0);"> </a> <div> <ul> <li> <span> </span> <div style = "위치 : 상대;"> <span> </spant> <span style = "위치 : 절대; "> </span> </div> <span> 50%</span> </li> <li> <li> <span> </span> <div> <span> </span> <ffffff </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 = "배경 :#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 = "background :#3399ff;"> </a> </div> </li> </ul> </div> </div> </div> <!-绑定手机提示-> <div style = "display : none;"> <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> </div> </div> </div> </div> <cript> dragbar (85); barwidth) {// var $ box = $ ( '. dragbar'); var $ bg = $ ( '. dragbar'); var $ bgcolor = $ ( '. progress'); var $ btn = $ ( '. icon'); var $ text = $ ( '. %'); var lx = 0; var bgleft = 0; var lx = 0; var lx = 0; 0; $ btn.mousedown (함수 (e) {lx = $ btn.offset (). 왼쪽; // 距离浏览器左边的距离 x x = e.pagex -left; statu = true;}); $ (document) .mouseup (statu = {false;}); $ bg.mousemove (left (left <0) e. = 0;} if (왼쪽> barwidth) {왼쪽 = barwidth;} $ btn.css ( '왼쪽', 왼쪽); $ bgcolor.width (왼쪽); $ text.html (parseint*100) + '%';}}); $ bg.click (e) {if (e) {if (e) {if (e) $ bg.offset (). 왼쪽; 왼쪽 = e.pagex -bgleft; if (왼쪽 <0) {왼쪽 = 0;} if (왼쪽> barwidth) {왼쪽 = barwidth;} $ btn.css ( '왼쪽', 왼쪽); $ bgcolor.stop (). Animate ({width : left}, barwidth); $ textml (width : barwidth); barwidth*100) + '%');}});} // 发表评论 $ ( ". 댓글-영사관 textarea"). focus () {$ ( "#form-wrap"). addClass ( "Focus");}); $ ( '. 댓글-aferea'). bind ( 'input propidechange', function () .num '). $ ( ". Comment-Area TextRea"). blur (function () {if ($ ( '. Comment-Area TextRea '). val (). length == 0) {$ ( "#form-wrap"). RemoveClass ( "Focus");}}); $ ( ". btn-set"). click (function ( 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 ")); $ (". rgb-set .color "). css ("backgroundColor ", $ (this) .css ("backgroundColor "); </html);CSS
common.css
기사, 제쳐두고, 오디오, 블록 쿼트, 신체, 버튼, 코드, DD, 대화 상자, div, dl, dt, fieldset, figure, figure, form, h1, h2, h3, h4, h5, h6, hgroup, hr, ligend, li, Mark, menu, menu, nav, pries, section, tably, td, td, tfo, tfo OT, TH, THEAD, TIME, UL, VIDEO {마진 : 0; 패딩 : 0; 개요 : 0; 배경 : 투명} 기사, 제외, 대화 상자, 그림, 바닥 글, 바닥 글, 헤더, HGROUP, NAV, 섹션 {block} 본문, 버튼, 입력, textarea {font : 12px/1.5 Arial,/5B8B/4F53, SANS-SERIF} 버튼, H1, H2, H3, H4, H5, H6, 입력, 선택, TextArea {Font-Size : 100%} 주소, 인용, DFN, EM, VAR {Font Style : Normal} 코드, KBD, PRES, SAMP {FONT-FAMILY : CORIER 신규, 택배, Monospace} small {font-size : 12px} li, ol, ul {list-style : none} img {border : none} a {text-decoration : none; antline : thin 없음; 커서 : 포인터} a : 호버 {텍스트-결정 : 밑줄} 테이블 {border-collapse : collapse; border-spacing : 0}. "; clear : 둘 다; 높이 : 0} .fr {float : right} .fl {float : left} html {-webkit-text-size-Just : none} body {font : 12px/1.5 /5fae/8f6f/96c5/9ed1,Tahoma,ial ,/5b8b/4f53,sans-serif} .tc {retxt-align:center} .tl (retxt-align:left} .tr {retxt-align:right}Style.css
.lv-Wrapper {너비 : 990px; 마진 : 0 자동; Clear : Clear : 둘 다;}/*交互区域*/. lv-right-interact {width : 310px; float : 왼쪽; 위치 : 상대;}/*列表和评论按钮*/. lv-right-interact-menu {width : 100%;} A {float : 왼쪽; 너비 : 155px; 높이 : 40px; 배경 : #000 URL (../ images/videoicos.png); Border-Bottom : 2px solid #313132;} A : 호버 {Border-Color :#C22; 배경색 :#232324;}. LV-Right-Interact-Menu .Show {배경 위치 : 0px -44px;} 0px;} .tabcon {높이 : 800px; 배경색 :#232323;}/*评论区域*//*评论列表*/. Barrage .chat-wrap {위치 : 상대; 높이 : 630px; 오버 플로우 -x : adding : 15px 5px 0 15px;} .chat {height : 630px; 오버 플로 X : 숨겨진;}.}. 방사선 .CHAT LI {마진 : 0 0 5PX; 색상 : #555;}. 방사선 .CHAT LI SPAN {컬러 : #3271B7; 디스플레이 : 인라인;}. Barrage .CHAT Li.TXT { #8B8B8B;}. {color : #c22;}. Barrage .Chat li .vip {디스플레이 : 인라인-블록; 너비 : 20px; 높이 : 8px; 마진 : 0 0 0 5px; 수직-앨리글 : 1px; 배경 : URL (../ videoicos.png) no-Repeat -228px -86px;}/*}/*}. .comments-area {위치 : 절대; 하단 : 0px; 왼쪽 : 0; 너비 : 270px; 패딩 : 20px; 경계선 : 1px 솔리드 #222; 배경 색상 : #191919;}. 주석-예리. Formtext {위치 : 상대적; 패딩 : 10px; Porder : 1px solid #c9c9c9; } .comments-area .formText TextRea {너비 : 100%; 높이 : 30px; 크기 : 없음 : 없음; 오버 플로우 -Y : 숨겨진; 배경색; 배경색 :#c9c9c9; 컬러 :#666; 경계 : 0 없음;} .btn-submit {float : right; display : inline; width : 42px; 높이 : 24px; 라인-하이트 : 24px; 마진 : 10px 0 0; 텍스트-알림 : 중심; color : #fff; 배경 : #999;}. 인라인; 너비 : 18px; 높이 : 18px; 마진 : 12px 0 0; 배경 : url (../ images/videoicos.png) no-Repeat -206px -86px;}/*聚焦时评论状态*/. 주석-도구 .focus .forcus .fordt {border :#191919;#191919; .formtext textRea {back 12px 22px 18px 18px; 상단 : -70px; 왼쪽 : 10px; -webkit-user-select : none; moz-user-select : -moz-none;-moz-user-select : none; -o-user-select : none; -khtml-user-select : none; -ms-select : 없음; none; display : 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; font-weight; bold; block} .comments-area .rgb-set {height : 22px} .comments-area .rgb-set span {float : left; display : inline; color : #999;}. 댓글-area .rgb {width : 50px; height : 18px; border : 1px solid #d3d3d3; line-Height : 18px; lectin; color : 18px; #424242; 패딩 : 0 0 0 5px} .comments-area .color {width : 20px; 높이 : 20px; 경계 : 1px solid #d3d3d3; 마진 : -1px 0 0 2px} .comments-area .takecolor {width : 80px; margin : 5px 0 30}. a {display : block; width : 16px; 높이 : 16px; float : 왼쪽} .comments-area .dmopacity {float : right; border-left : 1px solid #d3d3d3; padding-left : 22px} .comments-area. 10px; cursor : default} .comments-area .Dragbar .Progress {너비 : 50%; 위치 : 절대; 높이 : 10px; 상단 : 0; 왼쪽; 왼쪽; 배경 : #39f} .comments-area .Comments-area .icon {width : 4px; 높이; : 16px; 왼쪽; 50%; 배경; #007cf7} .comments-area .percent {width : 85px; 텍스트-정렬 : 중심; 중심; 디스플레이 : 블록; 색상 : #39f}/*登录注册后发弹幕*/. comment-area .formtext .tips {color : #666; 패딩 : 11px 0; text-align : center;}. COMMORN-AREA .TOMTET. #39f;}. 주석-지역 .formtext .wait em {color : #c22;}/*绑定手机提示框*/. 주석-영역 .pop-phone {위치 : 절대; 왼쪽 : 30px; 하단 : 180px; 너비 : 250px; #4d4d4d; z-index : 99;}. pop-phone .close .close {위치 : 절대; 상단; 상단 : 5px; 오른쪽 : 5px; 너비 : 28px; 높이 : 28px; 배경 : url (../ image/videoicos.png) no-Repeat -233px -154px; 오버 플로우 : Hidden; .Close : 호버 {배경 위치 : -205px -154px;}. 팝폰 .bd {마진 : 10px 0 10px; 패딩 : 0 0 20px; 배경 : #4d4d4d URL (../ image/videoicos.png) no-Repeat -255px -102px; 14px; font-weight : normal; color : #fff;}. pop-phone .bd ul {margin : 15px 0 0;}. pop-phone .bd li {line-height : 22px; color : #fff;} .bd pa {float : left : inline-block; width : 84px; : 26px; 0; Line-Height : 26px; 텍스트-정렬 : 중심; 색상 : #fff; Border-Radius : 2PX; 배경 : #888;}. 팝폰 .BD PA : 호버 {text-decoration : none;}. bd p .locked : hover {배경 표 : #c22;}.二、实现
1 点击 ： ：“设置”的图标打开设置内容框 的图标打开设置内容框, 点击其他地方关闭设置内容框。
1.1 、点击“、点击”的图标打开设置内容框 的图标打开设置内容框, 点击其他地方关闭设置内容框。
第一步 ： 重复点击“设置”图标 图标, 内容框显示隐藏交替。
$ ( ". btn-set"). 클릭 (function (evt) {$ ( ". setform"). toggle (); evt.stopPropagation? evt.stopPropagation () : evt.cancelBubble = true;});第二步 第二步, 点击其他区域, 隐藏内容框。
$ ( ". tabcon"). click (function () {if ($ ( ". setform"). is ( ": visible")) {$ ( ". setform"). hide ();}});此时会有问题 此时会有问题, 点击“设置图标”时显示不出来内容框。因为事件会冒泡 时显示不出来内容框。因为事件会冒泡, 点击 .btn-set 后首先显示内容框, 然后事件会冒泡到 .tabcon 的父元素, 父元素绑定了事件让显示的内容框隐藏。解决方案就是阻止事件冒泡。即把第一步中的注释取消。 父元素绑定了事件让显示的内容框隐藏。解决方案就是阻止事件冒泡。即把第一步中的注释取消。
$ ( ". btn-set"). click (function (evt) {$ ( ". setform"). toggle (); evt.stopPropagation? evt.stopPropagation () : evt.cancelBubble = true;});第三步 第三步, 点击内容区, 正常显示。
2 、设置内容框样式
2.1 实现 html 如下
<div> <ul> <li> <li> <span> </span> <div style = "위치 : 상대;"> <span> </span> <span style = "위치 : 절대;"> </span> </div> <span 50%</li> <li> <li> <li> <li> <span> <span> <fffff </span> 스타일 = "배경 : #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;}. 90px} .dm-setname {font-setname {font-seice : 14px; color : #dedede; font-weight : bold; margin-bottom : 20px; display : block} .rgb-set {height : 22px} .rgb-set span {float : left : inline; inline;#999;}. 1px solid #d3d3d3; line-height : 18px; 마진-왼쪽 : 5px; 색상 : #424242; 패딩 : 0 0 0 5px} .color {너비 : 20px; 높이 : 20px; 테두리 : 1px solid #d3d3d3; 마진 : -1px 0 2px}. 5px 0 0 30px} .TakeColor a {디스플레이 : 블록; 너비; 너비 : 16px; 높이 : 16px; float : 왼쪽} .dmopacity {float : right; right; border-left : 1px solid #d3d3d3; padding-left : 22px} .Dragbar {width : 85px; 상대적인; 마진 -바닥 : 10px; 커서 : 기본} .Dragbar .Progress {너비 : 50%; 위치 : 절대; 높이; 높이 : 10px; 상단 : 0; 왼쪽 : 0; 배경 : #39f} .Con {너비 : 4px; 높이 : 16px; 위치 : 왼쪽 : 50%; 배경 : 50%; #007cf7} .percent {너비 : 85px; 텍스트-정렬 : 중심; 디스플레이 : 블록; 색상 : #39f}3 、进度条百分比实现
<cript> dragbar (85); 함수 dragbar (barwidth) {// var $ box = $ ( '. dragbar'); var $ bg = $ ( '. dragbar'); var $ bgcolor = $ ( '. Progress'); var $ btn = $ ( '. icon'); var x = 0; var ox = 0; var ox = 0; 0; var bgleft = 0; $ btn.mousedown (함수 (e) {lx = $ btn.offset (). 왼쪽; // x ox = e.pagex -left; statu = true;}); $ (document) .mouseup (function () {statu = false;}); $ bg.mouseMove (e) {in) (왼쪽 <0) {왼쪽 = 0;} if (왼쪽> barwidth) {왼쪽 = barwidth;} $ btn.css ( '왼쪽', 왼쪽); $ bgcolor.width (왼쪽); $ text.html (parseint (왼쪽 / barwidth*100) + '%'); $ bg.click (e)}); {bgleft = $ bg.offset (). 왼쪽; 왼쪽; left = e.pagex -bgleft; if (왼쪽 <0) {왼쪽 = 0;} if (왼쪽> barwidth) {왼쪽 = barwidth;} $ btn.css (왼쪽 ', 왼쪽); $ bgcolor.stop (). barwidth); $ text.html (parseint (왼쪽 / barwidth*100) + '%');}});} < / script>以上所述是小编给大家介绍的 JavaScript av av, 希望对大家有所帮助 希望对大家有所帮助, 如果大家有疑问欢迎给我留言, 小编会及时回复大家的！ 小编会及时回复大家的！