Jquery——弹幕效果

css样式

<style type="text/css">
    html,
    body {
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;
      font-family: "微软雅黑";
      font-size: 62.5%;
    }

    .boxDom {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    .idDom {
      width: 100%;
      height: 100px;
      background: #666;
      position: fixed;
      bottom: 0px;
    }

    .content {
      display: inline-block;
      width: 430px;
      height: 40px;
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
      margin: auto;
    }

    .title {
      display: inline;
      font-size: 4em;
      vertical-align: bottom;
      color: #fff;
    }

    .text {
      border: none;
      width: 300px;
      height: 30px;
      border-radius: 5px;
      font-size: 2.4em;
    }

    .btn {
      width: 60px;
      height: 30px;
      backgr
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
视频弹幕效果可以通过 JavaScript 和 jQuery 实现,具体实现步骤如下: 1. 创建弹幕元素 首先,在视频播放器下方创建一个 div 元素,用于显示弹幕,将其样式设置为绝对定位,宽度为视频播放器的宽度,高度为弹幕字体大小的两倍,背景色为透明。 ```html <div id="danmu-container"></div> ``` ```css #danmu-container { position: absolute; bottom: 0; width: 100%; height: 2em; background-color: transparent; overflow: hidden; } ``` 2. 发送弹幕 使用 jQuery 监听发送按钮的点击事件,获取文本框中的弹幕内容,并动态创建一个 span 元素,设置其样式和文本内容,将其添加到弹幕容器内,设置其初始位置为容器的右侧,使用 animate() 方法实现弹幕的滚动效果。 ```html <input type="text" id="danmu-input"> <button id="danmu-send">发送</button> ``` ```javascript $('#danmu-send').click(function() { var content = $('#danmu-input').val(); if (content) { var $danmu = $('<span>' + content + '</span>'); $danmu.css({ position: 'absolute', top: Math.random() * ($('#danmu-container').height() - 30) + 'px', right: 0, fontSize: '1em', whiteSpace: 'nowrap', color: '#fff' }); $('#danmu-container').append($danmu); $danmu.animate({ right: $('#danmu-container').width() }, 10000, function() { $(this).remove(); }); $('#danmu-input').val(''); } }); ``` 3. 暂停弹幕 使用 jQuery 监听视频播放器的暂停事件,遍历弹幕容器内的所有弹幕元素,使用 stop() 方法停止弹幕的滚动动画,即可实现暂停弹幕效果。 ```javascript $('#video-player').on('pause', function() { $('#danmu-container span').stop(); }); ``` 以上就是使用 JavaScript 和 jQuery 实现视频弹幕效果的基本步骤,可以根据需要进行功能扩展和优化。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值