JavaScript直播評(píng)論發(fā)彈幕切圖功能點(diǎn)集合效果代碼
更新時(shí)間：2016年06月26日 08:21:06 作者：starof
這篇文章主要介紹了JavaScript直播評(píng)論發(fā)彈幕切圖功能點(diǎn)集合效果代碼的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
一、代碼
html+js
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>數(shù)發(fā)直播平臺(tái)</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="http://static9.pplive.cn/vip/201507/pay/v_20150721174241/js/jquery.min.js"></script>
</head>
<body id="body" class="">
<div class="lv-wrapper cf">
<div class="lv-right-interact">
<div class="lv-right-interact-menu cf ">
<a href="javascript:;" title="節(jié)目單" class="show now" data-target="liveprogram"></a>
<a href="javascript:;" title="彈幕" class="barrage" data-target="barrage"><i class="ic2"></i></a>
</div>
<div class="tabcon" >
<!--彈幕-->
<div class="barrage">
<div class="chat-wrap">
<div class="chat">
<ul>
<li class="">
<span class="" data-name="sysmsg">系統(tǒng)消息：</span>
<span class="txt">歡迎進(jìn)入寧夏衛(wèi)視!</span>
</li>
<li class="">
<span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span>
<span class="txt">評(píng)論1</span>
</li>
<li class="">
<span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span>
<span class="txt">我的評(píng)論很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)</span>
</li>
<li class="">
<span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span>
<span class="txt">評(píng)論1</span>
</li>
<li class="">
<span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span>
<span class="txt">我的評(píng)論很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)</span>
</li><li class="">
<span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span>
<span class="txt">評(píng)論1</span>
</li>
<li class="">
<span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span>
<span class="txt">我的評(píng)論很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)</span>
</li><li class="">
<span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span>
<span class="txt">評(píng)論1</span>
</li>
<li class="">
<span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span>
<span class="txt">我的評(píng)論很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)</span>
</li><li class="">
<span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span>
<span class="txt">評(píng)論1</span>
</li>
<li class="">
<span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span>
<span class="txt">我的評(píng)論很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)</span>
</li><li class="">
<span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span>
<span class="txt">評(píng)論1</span>
</li>
<li class="">
<span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span>
<span class="txt">我的評(píng)論很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)</span>
</li><li class="">
<span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span>
<span class="txt">評(píng)論1</span>
</li>
<li class="">
<span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span>
<span class="txt">我的評(píng)論很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)</span>
</li><li class="">
<span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span>
<span class="txt">評(píng)論1</span>
</li>
<li class="">
<span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span>
<span class="txt">我的評(píng)論很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)</span>
</li><li class="">
<span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span>
<span class="txt">評(píng)論1</span>
</li>
<li class="">
<span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span>
<span class="txt">我的評(píng)論很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)</span>
</li><li class="">
<span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span>
<span class="txt">評(píng)論1</span>
</li>
<li class="">
<span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span>
<span class="txt">我的評(píng)論很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)</span>
</li><li class="">
<span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span>
<span class="txt">評(píng)論1</span>
</li>
<li class="">
<span class="vipcolor" data-name="liiuxiaobao">starof<i class="vip"></i>：</span>
<span class="txt">我的評(píng)論很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)</span>
</li>
<li class="">
<span class="vipcolor" data-name="_11367384@qq">_11367384@qq<i class="vip"></i>：</span>
<span class="txt">fasf</span>
</li>
</ul>
</div>
</div>
<div class="comments-area">
<div id="form-wrap">
<div class="formtext">
<textarea name="" rows="2" cols="1" maxlength="30" placeholder="請(qǐng)?jiān)谶@里輸入評(píng)論" style="display:none;"></textarea>
<p class="num" style="display:none;">0/30</p>
<div class="user_facebox" style="display:none;"></div>
<div class="loginarea" style="display: block;">
<p class="tips login" style="display: none;">
<a href="javascript:void(0);" data-type="login" title="登錄">登錄</a>
或 <a href="javascript:void(0);" data-type="reg" title="注冊(cè)">注冊(cè)</a>后可以發(fā)送彈幕
</p>
<p class="tips bindphone" >
<a target="_blank">綁定手機(jī)</a>即可發(fā)送彈幕哦
</p>
<p class="tips wait" style="display:none"><em>5</em> 秒后可再次評(píng)論</p>
</div>
</div>
<a href="javascript:void(0);" class="btn-submit">發(fā)送</a>
<a href="javascript:void(0);" class="btn-set"></a>
<div class="setform">
<ul class="dm-config cf">
<li class="dmopacity">
<span class="dm-setname">彈幕顯示設(shè)置</span>
<div class="dragbar" style="position: relative;">
<span class="progress"></span>
<span class="icon" style="position: absolute;"></span>
</div>
<span class="percent">50%</span>
</li>
<li>
<span class="dm-setname">我的彈幕設(shè)置</span>
<div class="rgb-set cf">
<span>顏色</span>
<span class="rgb">#ffffff</span>
<span class="color" style="background:#ffffff"></span>
</div>
<div class="takecolor cf">
<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>
</div>
</li>
</ul>
</div>
</div>
<!--綁定手機(jī)提示-->
<div class="pop-phone" style="display: none;">
<a href="javascript:void(0);" title="關(guān)閉" class="close"></a>
<div class="bd">
<h4>提示</h4>
<ul>
<li>綁定完成前請(qǐng)不要關(guān)閉此窗口。</li>
</ul>
<p>
<a href="javascript:void(0);" title="" class="locked">已綁定手機(jī)</a>
<a class="failed" target="_blank">綁定遇到問(wèn)題</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');
var $btn = $('.icon');
var $text = $('.percent');
var statu = false;
var ox = 0;
var lx = 0;
var left = 0;
var bgleft = 0;
$btn.mousedown(function(e) {
lx = $btn.offset().left; //距離瀏覽器左邊的距離
ox = e.pageX - left;
statu = true;
});
$(document).mouseup(function() {
statu = false;
});
$bg.mousemove(function(e) {
if (statu) {
left = e.pageX - ox;
if (left < 0) {
left = 0;
}
if (left > barwidth) {
left = barwidth;
}
$btn.css('left', left);
$bgcolor.width(left);
$text.html(parseInt(left / barwidth*100) + '%');
}
});
$bg.click(function(e) {
if (!statu) {
bgleft = $bg.offset().left;
left = e.pageX - bgleft;
if (left < 0) {
left = 0;
}
if (left > barwidth) {
left = barwidth;
}
$btn.css('left', left);
$bgcolor.stop().animate({
width: left
}, barwidth);
$text.html(parseInt(left / barwidth*100) + '%');
}
});
}
//發(fā)表評(píng)論
$(".comments-area textarea").focus(function(){
$("#form-wrap").addClass("focus");
});
$('.comments-area textarea').bind('input propertychange', function() {
$('.comments-area .num').html($('.comments-area textarea').val().length+"/30");
});
$(".comments-area textarea").blur(function(){
if($('.comments-area textarea').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").click(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"));
});
</script>
</html>
css
common.css
article,aside,audio,blockquote,body,button,code,dd,dialog,div,dl,dt,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,legend,li,mark,menu,nav,ol,p,pre,section,table,tbody,td,textarea,tfoot,th,thead,time,ul,video{margin:0;padding:0;outline:0;background:transparent}article,aside,dialog,figure,footer,header,hgroup,nav,section{display:block}body,button,input,select,textarea{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 new,courier,monospace}small{font-size:12px}li,ol,ul{list-style:none}img{border:none}a{text-decoration:none;outline:thin none;cursor:pointer}a:hover{text-decoration:underline}table{border-collapse:collapse;border-spacing:0}.clear{clear:both}.cf:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;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:center}.tl{text-align:left}.tr{text-align:right}
style.css
.lv-wrapper{
width:990px;
margin:0 auto;
clear:both;
}
/*交互區(qū)域*/
.lv-right-interact{
width:310px;
float:left;
position:relative;
}
/*列表和評(píng)論按鈕*/
.lv-right-interact-menu{width:100%;}
.lv-right-interact-menu a{float:left;width:155px;height:40px;background:#000 url(../images/videoicos.png);border-bottom:2px solid #313132;}
.lv-right-interact-menu .now,.lv-right-interact-menu 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{background-position:156px -44px;}
.lv-right-interact-menu .barrage.now,.lv-right-interact-menu .barrage:hover{background-position:156px 0px;}
.lv-right-interact .tabcon{height:800px;background-color:#232323;}
/*評(píng)論區(qū)域*/
/*評(píng)論列表*/
.barrage .chat-wrap{
position:relative;
height:630px;
overflow-x:hidden;
padding:15px 5px 0 15px;
}
.barrage .chat-wrap .chat{
height:630px;
overflow-x:hidden;
}
.barrage .chat li {
margin: 0 0 5px;
color: #555;
}
.barrage .chat li span {
color: #3271b7;
display: inline;
}
.barrage .chat li span.txt {
color: #8b8b8b;
}
.barrage .chat li span.vipcolor {
color: #c22;
}
.barrage .chat li .vip {
display: inline-block;
width: 20px;
height: 8px;
margin: 0 0 0 5px;
vertical-align: 1px;
background: url(../images/videoicos.png) no-repeat -228px -86px;
}
/*發(fā)送評(píng)論*/
.barrage .comments-area{
position:absolute;
bottom:0px;
left:0;
width:270px;
padding:20px;
border-top:1px solid #222;
background-color:#191919;
}
.comments-area .formtext{
position:relative;
padding:10px;
border:1px solid #c9c9c9;
background-color:#c9c9c9;
}
.comments-area .formtext textarea{
width:100%;
height:30px;
resize:none;
overflow-y:hidden;
background-color:#c9c9c9;
color:#666;
border:0 none;
}
.comments-area .formtext .num{
position:absolute;
bottom:3px;
right:6px;
color:#666;
}
.comments-area .btn-submit {
float: right;
display: inline;
width: 42px;
height: 24px;
line-height: 24px;
margin: 10px 0 0;
text-align: center;
color: #fff;
background: #999;
}
.comments-area .btn-submit:hover{
text-decoration:none;
}
.comments-area .btn-set {
float: left;
display: inline;
width: 18px;
height: 18px;
margin: 12px 0 0;
background: url(../images/videoicos.png) no-repeat -206px -86px;
}
/*聚焦時(shí)評(píng)論狀態(tài)*/
.comments-area .focus .formtext{
border-color:#c22;
color:#191919;
background-color:#fff;
}
.comments-area .focus .formtext textarea{
background-color:#fff;
}
.comments-area .focus .btn-submit{
background-color:#c22;
}
/*彈幕顏色*/
.comments-area .setform {
position: 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;
color:#dedede;
font-weight: bold;
margin-bottom:20px;
display: 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;
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 .takecolor {
width: 80px;
margin: 5px 0 0 30px
}
.comments-area .takecolor 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;
height: 10px;
background: #d3d3d3;
position: relative;
margin-bottom: 10px;
cursor: default
}
.comments-area .dragbar .progress {
width: 50%;
position: absolute;
height: 10px;
top: 0;
left: 0;
background: #39f
}
.comments-area .dragbar .icon {
width: 4px;
height: 16px;
position: absolute;
top: -3px;
left: 50%;
background: #007cf7
}
.comments-area .percent {
width: 85px;
text-align: center;
display: block;
color: #39f
}
/*登錄注冊(cè)后發(fā)彈幕*/
.comments-area .formtext .tips {
color: #666;
padding: 11px 0;
text-align: center;
}
.comments-area .formtext .tips a {
padding: 0 5px 0 0;
color: #39f;
}
.comments-area .formtext .wait em {
color: #c22;
}
/*綁定手機(jī)提示框*/
.comments-area .pop-phone {
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-weight: normal;
color: #fff;
}
.pop-phone .bd ul {
margin: 15px 0 0;
}
.pop-phone .bd li {
line-height: 22px;
color: #fff;
}
.pop-phone .bd p a {
float: left;
display: inline-block;
width: 84px;
height: 26px;
margin: 15px 5px 0;
line-height: 26px;
text-align: center;
color: #fff;
border-radius: 2px;
background: #888;
}
.pop-phone .bd p a:hover{
text-decoration:none;
}
.pop-phone .bd p .locked:hover {
background-color:#c22;
}
二、實(shí)現(xiàn)
1、效果：點(diǎn)擊“設(shè)置”的圖標(biāo)打開(kāi)設(shè)置內(nèi)容框，點(diǎn)擊其他地方關(guān)閉設(shè)置內(nèi)容框。
1.1、點(diǎn)擊“設(shè)置”的圖標(biāo)打開(kāi)設(shè)置內(nèi)容框，點(diǎn)擊其他地方關(guān)閉設(shè)置內(nèi)容框。
第一步：重復(fù)點(diǎn)擊“設(shè)置”圖標(biāo)，內(nèi)容框顯示隱藏交替。
$(".btn-set").click(function(evt){
$(".setform").toggle();
//evt.stopPropagation?evt.stopPropagation():evt.cancelBubble=true;
});
第二步，點(diǎn)擊其他區(qū)域，隱藏內(nèi)容框。
$(".tabcon").click(function(){
if($(".setform").is(":visible")){
$(".setform").hide();
}
});
此時(shí)會(huì)有問(wèn)題，點(diǎn)擊“設(shè)置圖標(biāo)”時(shí)顯示不出來(lái)內(nèi)容框。因?yàn)槭录?huì)冒泡，點(diǎn)擊.btn-set后首先顯示內(nèi)容框，然后事件會(huì)冒泡到.tabcon的父元素，父元素綁定了事件讓顯示的內(nèi)容框隱藏。解決方案就是阻止事件冒泡。即把第一步中的注釋取消。
$(".btn-set").click(function(evt){
$(".setform").toggle();
evt.stopPropagation?evt.stopPropagation():evt.cancelBubble=true;
});
第三步，點(diǎn)擊內(nèi)容區(qū)，正常顯示。
2、設(shè)置內(nèi)容框樣式
2.1實(shí)現(xiàn)html如下
<div class="setform"> <ul class="dm-config cf"> <li class="dmopacity"> <span class="dm-setname">彈幕顯示設(shè)置</span> <div class="dragbar" style="position: relative;"> <span class="progress"></span> <span class="icon" style="position: absolute;"></span> </div> <span class="percent">50%</span> </li> <li> <span class="dm-setname">我的彈幕設(shè)置</span> <div class="rgb-set cf"> <span>顏色</span> <span class="rgb">#ffffff</span> <span class="color" style="background:#ffffff"></span> </div> <div class="takecolor cf"> <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> </div> </li> </ul> </div>
2.2實(shí)現(xiàn)css如下
/*彈幕顏色*/
.setform {
z-index:99;
color: #999;
background: #252525;
border: 1px solid #424242;
width: 240px;
padding: 12px 22px 18px 18px;
}
.dm-config {
margin: 18px 0 0 0;
display: block
}
.dm-config li {
height: 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;
display: inline;
color:#999;
}
.rgb {
width: 50px;
height: 18px;
border: 1px solid #d3d3d3;
line-height: 18px;
margin-left: 5px;
color: #424242;
padding: 0 0 0 5px
}
.color {
width: 20px;
height: 20px;
border: 1px solid #d3d3d3;
margin: -1px 0 0 2px
}
.takecolor {
width: 80px;
margin: 5px 0 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;
background: #d3d3d3;
position: relative;
margin-bottom: 10px;
cursor: default
}
.dragbar .progress {
width: 50%;
position: absolute;
height: 10px;
top: 0;
left: 0;
background: #39f
}
.dragbar .icon {
width: 4px;
height: 16px;
position: absolute;
top: -3px;
left: 50%;
background: #007cf7
}
.percent {
width: 85px;
text-align: center;
display: block;
color: #39f
}
3、進(jìn)度條百分比實(shí)現(xiàn)
<script>
dragbar(85);
function dragbar( barwidth){
//var $box = $('.dragbar');
var $bg = $('.dragbar');
var $bgcolor = $('.progress');
var $btn = $('.icon');
var $text = $('.percent');
var statu = false;
var ox = 0;
var lx = 0;
var left = 0;
var bgleft = 0;
$btn.mousedown(function(e) {
lx = $btn.offset().left; //距離瀏覽器左邊的距離
ox = e.pageX - left;
statu = true;
});
$(document).mouseup(function() {
statu = false;
});
$bg.mousemove(function(e) {
if (statu) {
left = e.pageX - ox;
if (left < 0) {
left = 0;
}
if (left > barwidth) {
left = barwidth;
}
$btn.css('left', left);
$bgcolor.width(left);
$text.html(parseInt(left / barwidth*100) + '%');
}
});
$bg.click(function(e) {
if (!statu) {
bgleft = $bg.offset().left;
left = e.pageX - bgleft;
if (left < 0) {
left = 0;
}
if (left > barwidth) {
left = barwidth;
}
$btn.css('left', left);
$bgcolor.stop().animate({
width: left
}, barwidth);
$text.html(parseInt(left / barwidth*100) + '%');
}
});
}
</script>
以上所述是小編給大家介紹的JavaScript直播評(píng)論發(fā)彈幕切圖功能點(diǎn)集合效果代碼的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家有疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
ES6的異步操作之promise用法和async函數(shù)的具體使用
這篇文章主要介紹了ES6的異步操作之promise用法和async函數(shù)的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
關(guān)閉頁(yè)面時(shí)window.location事件未執(zhí)行的原因分析及解決方案
最近在做一個(gè)項(xiàng)目的時(shí)候，遇到個(gè)問(wèn)題，就是關(guān)閉頁(yè)面時(shí)window.location事件未執(zhí)行，百思不得其解，度娘上搜了一下才知道具體原因，記錄一下2014-09-09
對(duì)存在JavaScript隱式類型轉(zhuǎn)換的四種情況的總結(jié)(必看篇)
下面小編就為大家?guī)?lái)一篇對(duì)存在JavaScript隱式類型轉(zhuǎn)換的四種情況的總結(jié)(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
關(guān)于JavaScript中parseInt()的一個(gè)怪異行為解決
parseInt()是內(nèi)置的?JS?函數(shù),用于解析數(shù)字字符串中的整數(shù),下面這篇文章主要給大家介紹了關(guān)于JavaScript中parseInt()的一個(gè)怪異行為解決,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
微信小程序使用form表單獲取輸入框數(shù)據(jù)的實(shí)例代碼
這篇文章主要介紹了微信小程序使用form表單獲取輸入框數(shù)據(jù)的實(shí)例代碼，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
js 驗(yàn)證密碼強(qiáng)弱的小例子，需要的朋友可以參考一下2013-03-03
腳本控制自適應(yīng)高度的縮短問(wèn)題...2007-10-10
js+audio實(shí)現(xiàn)音樂(lè)播放器
這篇文章主要為大家詳細(xì)介紹了js+audio實(shí)現(xiàn)音樂(lè)播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
動(dòng)態(tài)添加刪除表格行的js實(shí)現(xiàn)代碼
本篇文章主要是對(duì)動(dòng)態(tài)添加刪除表格行的js實(shí)現(xiàn)代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
使用hasOwnProperty時(shí)報(bào)錯(cuò)的解決方法
hasOwnProperty這個(gè)方法是用來(lái)查找一個(gè)對(duì)象是否有某個(gè)屬性,且查找的屬性必須是對(duì)象本身的一個(gè)成員,但是不會(huì)去查找對(duì)象的原型鏈,文中介紹了使用示例代碼及使用時(shí)可能會(huì)遇到的問(wèn)題,對(duì)hasOwnProperty報(bào)錯(cuò)原因分析及解決方法感興趣的朋友一起看看吧2024-01-01