一、代码

html+js

数发直播平台

  • 系统消息：

    欢迎进入宁夏卫视!

  • starof：

    评论1

  • starof：

    我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长

  • starof：

    评论1

  • starof：

    我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长

  • starof：

    评论1

  • starof：

    我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长

  • starof：

    评论1

  • starof：

    我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长

  • starof：

    评论1

  • starof：

    我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长

  • starof：

    评论1

  • starof：

    我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长

  • starof：

    评论1

  • starof：

    我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长

  • starof：

    评论1

  • starof：

    我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长

  • starof：

    评论1

  • starof：

    我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长

  • starof：

    评论1

  • starof：

    我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长

  • starof：

    评论1

  • starof：

    我的评论很长很长很长很长很长很长很长很长很长很长很长很长很长

  • _11367384@qq：

    fasf

0/30

登录

或 注册后可以发送弹幕

绑定手机即可发送弹幕哦

5 秒后可再次评论

发送

  • 弹幕显示设置

    50%

  • 我的弹幕设置

    颜色

    #ffffff

提示

  • 绑定完成前请不要关闭此窗口。

已绑定手机

绑定遇到问题

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) + '%');

}

});

}

//发表评论

$(".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"));

});

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;

}

/*交互区域*/

.lv-right-interact{

width:310px;

float:left;

position:relative;

}

/*列表和评论按钮*/

.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;}

/*评论区域*/

/*评论列表*/

.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;

}

/*发送评论*/

.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;

}

/*聚焦时评论状态*/

.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

}

/*登录注册后发弹幕*/

.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;

}

/*绑定手机提示框*/

.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;

}

二、实现

1、效果：点击“设置”的图标打开设置内容框，点击其他地方关闭设置内容框。

1.1、点击“设置”的图标打开设置内容框，点击其他地方关闭设置内容框。

第一步：重复点击“设置”图标，内容框显示隐藏交替。

$(".btn-set").click(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如下

  • 弹幕显示设置

    50%

  • 我的弹幕设置

    颜色

    #ffffff

2.2实现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、进度条百分比实现

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) + '%');

}

});

}

以上所述是小编给大家介绍的JavaScript直播评论发弹幕切图功能点集合效果代码的相关知识，希望对大家有所帮助，如果大家有疑问欢迎给我留言，小编会及时回复大家的！

可发弹幕php,JavaScript直播评论发弹幕切图功能点集合效果代码相关推荐

  1. 直播系统源码，分页功能

    直播系统源码,分页功能实现的相关代码 /*** 定义开始位置*/var begin,end;if (pb.totalPage<10){begin =1;end=pb.totalPage}else ...

  2. 增加内容曝光、获得更多粉丝 - 「评论发红包」功能

    目录 博客发放以及领取红包规则 1. 发布博客评论社区红包规则: 2. 博客评论红包领取规则 如何发红包评论? 发布红包评论益处 不知道大家有没有注意到,我们的「评论发红包」功能已经上线啦-  现在几 ...

  3. android 评论发表情,安卓手机怎么在微信朋友圈评论发表情包？

    核心提示:目前,微信的最新版本更新了朋友圈评论表情包的功能,也就是说用户可以朋友圈开启"斗图模式"啦!但是有些安卓系统的小伙伴发现,自己更新了微信后似乎也不能在朋友圈发评论,具体是 ...

  4. 抖音小店无货源店群猜你喜欢精细化运营玩法，不直播不发视频人人都可操作

    大家好我是小高 今天给大家讲一下目前做抖音小店比较稳定可以快速起店的玩法猜你喜欢玩法,不直播不发视频就能起飞! 首先开店 什么类目 建议选鞋服.家居百货.服饰配件,不建议做女装,售后太麻烦了比较适合招 ...

  5. Python + Selenium + Chrome Driver 自动化点击+评论+刷弹幕（仅供学习）

    Python + Selenium + Chrome Driver 自动化点击 评论 刷弹幕 首先说明,这篇博文仅供学习!仅供学习!仅供学习! 不要拿去做其他事,封号概不负责!!! 突发奇想 首先先说 ...

  6. 直播页面6：直播中的弹幕_烈焰弹幕使

    直播页面6:直播中的弹幕_烈焰弹幕使 一.github地址 二.代码 0.依赖 1.xml布局 2.java代码 一.github地址 https://github.com/Bilibili/Danm ...

  7. SAP UI5 应用开发教程之七十九 - 采用测试驱动开发理念(Test Driven Development)进行 SAP UI5 应用的功能开发(一)的试读版

    一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...

  8. 怎样发量暴增_发量少怎么办如何增加发量?看完你就明白了

    发量少怎么办如何增加发量?看完你就明白了 随着社会压力的增大,很多疾病都跻身于医学界,脱发就是最常见的疾病之一,尤其是脂溢性脱发!之前我们讲到过,脂溢性脱发从中医角度来看主要是分为临泣穴脱发和百会穴脱 ...

  9. 【unity3D】直播间滚动式弹幕效果

    新时代总会有新产物,比如直播.直播的特色就在于实时互动.将原本的视频聊天一对一,变成主播和评论区聊天的一对多. 直播的特色也很明显,底部摄像机渲染实时画面:在左下角叠上一层弹幕滚动实时显示评论,右下角 ...

  10. uniapp做直播+可拖动弹幕

    项目需求:用uniapp开发微信小程序,直播界面做可拖动弹幕. 一.直播页面,微信小程序的<live-player>组件就是用来搭建直播的. 我的项目需求是从上一个页面点击后直接跳转进对应 ...

最新文章

  1. backtrace java_在c file中打出backtrace到某个文件中
  2. 1026 Modular multiplication of polynomials
  3. 数学建模——主成分分析算法详解Python代码
  4. 160个Crackme038之P-Code初窥门径
  5. 从网页中读取数据 python_数据分析硬核技能：用 Python 爬取网页
  6. Java 基础【09】你的多继承纳？
  7. asp.net(C#)页面事件顺序
  8. mysql查询修改数据类型_MySQL增删改查及数据类型
  9. php 小墙 垃圾评论,关于php过滤垃圾评论
  10. 基于Visual C++2013拆解世界五百强面试题--题8-数组的排序和查找
  11. i5双线程_新老系统多项测试:多线程运算谁更靠谱
  12. echarts实现3D饼图
  13. kindle书籍的后缀名_将azw3“转换”成mobi？——关于Kindle格式电子书的名称与后缀及其他的讨论...
  14. python 求极值
  15. 纯php实现中秋博饼游戏（2）：掷骰子并输出结果
  16. 恶劣天气 3D 目标检测数据集收集
  17. IBM 2005-B16 SAN光纤交换机学习笔记
  18. 周迅是永远的精灵，不接受反驳
  19. C语言求最长公共子序列
  20. 服务器时装不显示不出来,常见问题FAQ汇总

热门文章

  1. dw1510_超低温种子储存柜
  2. 运行c语言程序显示已停止运行程序,c – “此应用程序已请求运行时以不寻常的方式终止它.”...
  3. 中国移动计算机二面笔试题,中国移动笔试面试经验
  4. 软件测试笔试面试题目完全汇总
  5. CSDN网站系统升级公告
  6. 电子设计竞赛应该如何准备？
  7. 使用串口打印系统时间
  8. zul页面报org.xml.sax.SAXParseException
  9. oracle grant的用法,oracle grant总结
  10. 利用VS2010模仿QQ2011登陆界面