利用前端js做一个弹幕网

最新推荐文章于 2023-05-29 08:50:51 发布
最新推荐文章于 2023-05-29 08:50:51 发布
阅读量331 收藏 1
点赞数
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43240245/article/details/107239698
版权

目录

成果展示

源代码

成果展示 

源代码 


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>barrage</title>
  <style>
    .box{
      width: 800px;
      height: 500px;
      margin:0 auto;
      border:5px black solid;
    }
    .barrage-container-wrap{
        width: 100%;
        height: 500px;
        position: relative;
        overflow: hidden;
        background: url('./image/陈强.jpg') no-repeat;
        background-size: 100% 100%;
    }
    .barrage-container{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 30px;
        cursor: default;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .barrage-item{
        position:absolute;
        top:0;
        left: 100%;
        white-space: nowrap;
        cursor: pointer;
        color:#fff;
    }
    .barrage-item .barrage-tip{
        display: none;
        position: absolute;
        top:-26px;
        padding: 7px 15px;
        line-height: 12px;
        font-size: 12px;
        color: #f20606;
        background-color: #fff;
        white-space: nowrap;
        border: 1px solid #ddd;
        border-radius: 8px;
        -webkit-box-shadow: 0 0 10px 1px rgba(0,0,0,.1);
        box-shadow: 0 0 10px 1px rgba(0,0,0,.1);
        -webkit-transform-origin: 15px 100%;
        -ms-transform-origin: 15px 100%;
        transform-origin: 15px 100%;
        webkit-animation: tipScale cubic-bezier(.22,.58,.12,.98) .4s;
        animation: tipScale cubic-bezier(.22,.58,.12,.98) .4s;
      }
    .send-wrap{
        width: 800px;
        height: 40px;
      margin-top: 20px;
      border:5px black solid;
    }
    .input{
        width: 300px;
        height: 30px;
        margin-top: 5px;
        margin-left: 250px;
        position: center;
        line-height: 30px;
        outline: none;
        -webkit-appearance: none;
        border-radius: 5px;
        padding:0;
        padding-left: 10px;
    }
    .send-btn{
        height: 38px;
        line-height: 38px;
        margin-top: 5px;
        text-align: center;
        font-weight: bold;
        color: #fff;
        background: #93d0ea;
        text-shadow:1px 1px 1px #333;
        border-radius: 5px;
        margin:0 20px 20px 0;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        padding:5px 15px;
    }
    @-webkit-keyframes tipScale{
        0{
          -webkit-transform: scale(0);
           transform: scale(0);
        }
        50% {
           -webkit-transform: scale(1.1);
           transform: scale(1.1);
        }
        100% {
          -webkit-transform: scale(1);
          transform: scale(1);
        }
    }
  </style>
</head>
<body>
<div class="box">
   <div class="barrage-container-wrap clearfix" >
    <div class="barrage-container">
    </div>  
  </div>
  <div class="send-wrap">
    <input type="text" class="input" placeholder="弹幕发送">
    <span class="send-btn">发送</span>
  </div>  
</div>
</body>
<script>
(function(){
  var barrageArray = [
          {
            url: '用户头像',
            text: '秋天爱美丽',
            level: 10
          },
          {
            url: '用户头像',
            text: '今天很开心啊',
            level: 10
          },
          {
            url: '用户头像',
            text: 'winter has come',
            level: 10
          },
          {
            url: '',
            text: '土耳其现在形势',
            level: 10
          },
          {
            url: '',
            text: '没事早点回家吃饭啊',
            level: 10
          },
           {
            url: '',
            text: '这主角真实醉了，不会回啊',
            level: 10
          },
          {
            url: '',
            text: '背景音乐真好听啊',
            level: 10
          },
          {
            url: '',
            text: '背景音乐是***',
            level: 10
          },
          {
            url: '',
            text: '经费在燃烧啊',
            level: 10
          },
          {
            url: '',
            text: '国产良心剧',
            level: 10
          },
      ];
  var barrageColorArray = [
    '#0099CC','#333333', '#009966','#FFFF66','#9933FF','#FFFF99','#CCCCFF','#CC9933','#FFFF66'
  ];
  var barrageTipWidth = 50; //提示语的长度

  var barrageBoxWrap = document.querySelector('.barrage-container-wrap');;
  var barrageBox = document.querySelector('.barrage-container');
  var inputBox = document.querySelector('.input');
  var sendBtn = document.querySelector('.send-btn');

  //容器的宽高度
  var barrageWidth = ~~window.getComputedStyle(barrageBoxWrap).width.replace('px','');
  var barrageHeight = ~~window.getComputedStyle(barrageBoxWrap).height.replace('px','');

  //发送
  function sendMsg(){
    var inputValue = inputBox.value;
    inputValue .replace(/\ +/g, "");

    if (inputValue.length <= 0) {
        alert('请输入');
        return false;
    }

    //生成弹幕
    createBarrage(inputValue,true); 
    inputBox.value = '';  
  }
  

  //创建弹幕
  function createBarrage(msg, isSendMsg){
    var divNode = document.createElement('div');
    var spanNode = document.createElement('span');

    divNode.innerHTML = msg;
    divNode.classList.add('barrage-item');
    barrageBox.appendChild(divNode);

    spanNode.innerHTML = '举报';
    spanNode.classList.add('barrage-tip');
    divNode.appendChild(spanNode);

    barrageOffsetLeft = getRandom(barrageWidth, barrageWidth*2);
    barrageOffsetLeft = isSendMsg ? barrageWidth : barrageOffsetLeft
    barrageOffsetTop = getRandom(10, barrageHeight-10);
    barrageColor = barrageColorArray[Math.floor(Math.random()*(barrageColorArray.length))];

    //执行初始化滚动
    initBarrage.call(divNode,{
      left : barrageOffsetLeft,
      top : barrageOffsetTop,
      color : barrageColor
    });
  }

  //初始化弹幕移动(速度，延迟)
  function initBarrage(obj) {
    //初始化
    obj.top = obj.top || 0;
    obj.class = obj.color || '#fff';
    this.style.left = obj.left + 'px';
    this.style.top = obj.top + 'px';
    this.style.color = obj.color;   

    //添加属性
    this.distance = 0;
    this.width = ~~window.getComputedStyle(this).width.replace('px','');
    this.offsetLeft = obj.left;
    this.timer = null;

    //弹幕子节点
    var barrageChileNode = this.children[0];
    barrageChileNode.style.left = (this.width-barrageTipWidth)/2 + 'px';

    //运动
    barrageAnimate(this);

    //停止
    this.onmouseenter = function(){
      barrageChileNode.style.display= 'block';
      cancelAnimationFrame(this.timer);
    };

    this.onmouseleave = function(){
      barrageChileNode.style.display = 'none';
      barrageAnimate(this);
    };

    //举报
    barrageChileNode.onclick = function(){
      alert('举报成功');
    }
  }
 
  //弹幕动画
  function barrageAnimate(obj){
    move(obj);

    if(Math.abs(obj.distance) < obj.width+obj.offsetLeft){
      obj.timer = requestAnimationFrame(function(){
        barrageAnimate(obj);
      });
    }else{
      cancelAnimationFrame(obj.timer);
      //删除节点
      obj.parentNode.removeChild(obj);
    }
  }

  //移动
  function move(obj){
    obj.distance--;
    obj.style.transform = 'translateX('+obj.distance+'px)';
    obj.style.webkitTransform = 'translateX('+obj.distance+'px)';
  }

  //随机获取高度
  function getRandom(start, end){
    return start +(Math.random() * (end - start));
  }


  /*******初始化事件**********/
  //系统数据
  barrageArray.forEach(function(item,index){
    createBarrage(item.text, false);
  });

  //点击发送
  sendBtn.onclick = sendMsg;   //点击发送

  //回车
  inputBox.onkeydown = function(e){
    e = e|| window.event;
    if(e.keyCode == 13){
      send();
    }
  }

})()

//兼容写法
(function() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||    // Webkit中此取消方法的名字变了
                                      window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
            var id = window.setTimeout(function() {
                callback(currTime + timeToCall);
            }, timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
    }
    if (!window.cancelAnimationFrame) {
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
    }
}());
</script>
</html>

 

躺赢
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用JS+CSS打造你自己的弹幕王国，让网页动起来！
weixin_62650212的博客
03-21 4565
😎用JS+CSS打造你自己的弹幕王国，让网页动起来！弹幕大法，让你的网页像视频一样有趣！如何用JS+CSS实现弹幕效果？看完这篇博客，你就会了！JS+CSS + 弹幕 = 网页新体验！教你如何用简单的代码实现弹幕功能！你还不会用JS+CSS做弹幕？快来学习这个超酷的网页技巧吧！你想用js和css实现弹幕效果吗？弹幕效果是指在视频或图片上显示滚动的文字或图形，通常用于表达观众的评论或反馈。这就是使用JS+CSS方法实现弹幕效果的简单示例网页。
基于原生js实现主流弹幕的所有功能
Tomshidi的博客
04-24 3409
原生js实现弹幕效果原理 二 距离写实现原理一有很长一段时间了，因为好像没什么人看，所以我就不太想写原理二，为了不食言，我还是坚持做完这个系列吧 下面介绍的就是目前主流直播弹幕网站的弹幕实现方式，包括弹幕指定暂停，点赞，举报功能. 首先来看一张实现动图 原理简介 动画效果使用css3中的 transition 属性实现 只有transition是远远不够的，因为transition需要主动触.........
js 实现弹幕效果的两种方法
weixin_53376443的博客
04-07 2467
基于canvas实现弹幕，微信小程序实现弹幕
JavaScript实现弹幕功能
m0_51354601的博客
04-28 1813
【代码】JavaScript实现弹幕功能。
HTML+CSS+JavaScript制作弹幕效果
qq_44715376的博客
05-29 2508
全屏弹幕，盒子弹幕，视频弹幕
一个Vue弹幕视频播放器源码.zip
05-18
一个Vue弹幕视频播放器源码
前端弹幕效果，是一个基于jQuery的前端特效demo
最新发布
11-11
弹幕效果示例
纯原生JS 实现的多彩视频弹幕效果。可实现删除 关闭打开弹幕
05-21
适合刚学习完原生js项目的同学。里面简单用到了bootsrap的样式。弹幕是随机大小颜色。可以控制出现消失，列表清楚。适合刚学完面向对象 bom dom操作的同学
本人之前写的JS弹幕 对前端H5 感兴趣的可以学习一下
05-21
H5弹幕代码 利用js API实现弹幕多彩滚动起来 可以通过播放视频来实现弹幕可视化效果 总之学习H5 觉得弹幕比较有用 可以尝试玩一下是个不错的选择
一个纯前端的官网的展示，使用jquery，css,js做的
04-14
一个纯前端的官网的展示，使用jquery，css,js做的，效果炫酷
JS实现直播网站弹幕
10-31
纯JS实现的弹幕效果，类似直播网站弹幕，支持输入实时显示。
实现弹幕 js
03-26
可以自己修改实现弹幕，前端的一些知识，又兴趣的可以下看
js特效弹幕
08-24
仿京东七夕弹幕 HTML+CSS+jQuery实现弹幕技术
搭建一个弹幕新闻网站
makesomethings的博客
05-04 2359
本项目仅供学习使用, 请勿用来进行商业用途 本期知识点: 使用JS制作弹幕的方法 使用分组定位来实现弹幕不重叠 使用flask构建网站 爬虫: 百度新闻, B站榜单, 知乎热榜 前言 你是否在 刷B站 或 刷知乎 时觉得不够畅? 是否想在一个平台上同时获取多个平台的有趣内容? 这个网站将为你打开一扇快速通道 先来看效果 弹幕可分类显示, 也可以全部显示(可自己添加更多网站, 接口的...
纯js 实现弹幕效果
热门推荐
natural_live的博客
08-02 2万+
弹幕时近几年新兴的一种技术，接下来我要展示的就是怎么实现类似弹幕的效果。 先贴下效果图： 说是效果，要拿出去用肯定是不行的。 先说一下是怎么样的实现方法。弹幕肯定是出现在屏幕上，所以我们暂时把出现弹幕的窗口称为背景。 弹幕肯定尽量不能重叠在一起，所以我把整个弹幕出现的背景划分为几块，如下图： 1 2 3 4 5
js实现bilibili弹幕列表随视频播放滚动
eyes++的博客
09-18 1198
以下是一些写脚ben时获得的数据记录，最后面是脚ben代码。 抓包拿到的弹幕数据接口："https://api.bilibili.com/x/v1/dm/list.so?oid=" + cid 该接口返回数据类型为XML。 cid是视频的id，不是AV号，获取方式有两种： 在控制台输入cid获取当前视频的cid 通过方法：window.__INITIAL_STATE__.videoData.pages 接口测试时获取的数据如下： 弹幕的返回数据含义如下： <d p="1611.18000,1,2
小程序实现弹幕功能-无限循环，不会重叠
p_pppxxxxmmm的博客
08-28 3211
以下是支付宝小程序代码，先上效果图 以下是axml代码： <view class="view"> <block a:for="{{bulletChatData}}" a:key="id"> <text class="item" style="animation: first 8s linear forwards;top:{{item.top}}%;color:{{item.color}};">{{index+item.text}}</text>
弹幕的实现
diaolanbeng0962的博客
02-07 1449
一、前言 　　今天浏览某网站看到一个活动页有内嵌的弹幕模块（图一），但是看到移动的弹幕重叠很多，不忍直视啊。突然想起很久之前自己写写过类似的弹幕，就翻出来看了一下，呵，也是不忍直视的，最后再附上当年的效果以及代码； 二、大话几点 1、弹幕应用场景，视频中，直播中，微信墙等； 2、弹幕增加了大家的互动性，不再是单纯的傻白甜的看着视频，还可以吐吐槽，增加趣味性，但对于密集恐...
js 弹幕
yjnlovepy的博客
01-18 514
js弹幕
利用前端技术写一个登录界面
03-25
当然可以，前端技术有很多种选择，比如HTML、CSS、...你可以使用这些技术来创建一个美观、响应式的登录页面。要注意的是，登录界面应该包含登录表单、登录按钮和一些参数验证，以保证用户输入的安全性和正确性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值