jQuery实现简单弹幕制作

2024-08-31 03:44:13

在现在的视频网站，我们在看视频的时候经常会有弹幕出现，那么怎么通过js实现这一效果呢，下面介绍一种简单的方法。

首先，搭好结构：

页面中先放一个视频，视频下部放一个input 标签和button按钮，代码如下：

<div class="box">
    <div class="top">
      <video src="./static/梦然-少年 .mp4" controls autoplay muted></audio>
    </div>
<div class="foot">
  <input type="text" name="" id="text">
  <input type="button" value="发送" id="btn">
</div>
</div>

再来写js

首先，我们需要包装三个函数，也就是发送到弹幕的随机颜色、随机高度和随机字体大小；代码如下：

<script>
    //随机获取字体颜色函数
  function getRandomColor(){
    var r = Math.floor(Math.random()*255);
    var g = Math.floor(Math.random()*255);
    var b = Math.floor(Math.random()*255);
    return 'rgb('+r+','+g+','+ b +')'
  }
//随机获取高度函数
  function getRandomHeight(){
    var height = $('.top').height()
    return Math.random()*height-30
  }
//随机获取字体大小函数
  function getRandomFontSize(){
    return Math.floor(Math.random()*60)
  }

现在我们需要获取用户输入的内容在将内容显示到页面中，并且移动，一直到页面外就消除，代码如下：

 //事件注册
$('#btn').on('click',function(){
if($('#text').val() ==''){
  return
}
  $('<span></span>').text($('#text').val()).css({
    'position':'absolute',
    'width':200,
    'height':50,
    'color':getRandomColor(),
    'fontSize':getRandomFontSize(),
    'right':-200,
    'top':getRandomHeight()
  }).animate({right:1000},10000,'linear',function(){
   $(this).remove()
  }).appendTo($('.top'))
  $('#text').val('')
})

最后将键盘回车键也绑定事件，让用户输入内容后按下回车键和按发送按钮有同样的效果：

$('#text').keydown(function(event){
  if($('#text').val() ==''){
  return
}
if(event.keyCode == 13){
  $('#btn').click()
}

})

</script>

最终效果如下

那么，现在一个简单的弹幕就制作完成了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

jQuery实现弹幕效果

效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } #wrap{ width:800px; height:550px; background:#E9E8E8; margin:0 auto; position:relative;
JQuery和HTML5 Canvas实现弹幕效果

JQuery和HTML5 Canvas两种方法实现弹幕效果: 方法一,JQuery实现. 源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont
简单实现jQuery弹幕效果

在要写一个弹幕案例的时候,首先要清楚每一步要干什么. 首先搭好框架之后在要发送弹幕时应该准备进行如下步骤: 获取到要发送到弹幕上的内容,即获取到文本框输入的内容.通过jquery的var str = $("#文本框的id").val(); 生成一个元素:利用jQuery的 var createSpan =$("")生成一个span元素,以便发送. 给刚创建的span赋值,即获取到的文本框中的值 createSpan.text(str ); 设置元素的动画效果,是元素
jQuery实现的页面弹幕效果【测试可用】

本文实例讲述了jQuery实现的页面弹幕效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht
基于jquery实现弹幕效果

用js写的一个弹幕效果图: 源码: <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"&
又一枚精彩的弹幕效果jQuery实现

简易弹幕效果:将发布的内容随机显示在弹幕右侧,逐渐左移最后消失. 涉及知识点:val().random().height().css().append().remove()等,主要是元素的操作 html代码: <a href="#">弹幕技术</a> <div class="mask"> <a href="#" class="button">X</a> </di
jQuery实现的弹幕效果完整实例

本文实例讲述了jQuery实现的弹幕效果.分享给大家供大家参考,具体如下: 看视频的时候老是会出现一些弹幕,对于这个看着很高大上的特效,其实也不难实现. 先来看看运行效果: 下面将整个代码显示出来: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net弹幕</title> <st
jquery实现直播弹幕效果

本文实例为大家分享了jquery直播弹幕展示的具体代码,供大家参考,具体内容如下理论知识: 实现效果主要涉及jq对节点的操作,以及动画函数的使用- 思路: 1.获取到评论文本框的值,对文本内容进行处理 2.动态创建一条弹幕,将创建的弹幕动态的添加到需要显示的页面,并同时创建一条新的评论消息,动态添加到评论列表 3.利用数组将每次添加的弹幕保存起来,使用定时器让所有的弹幕循环动态的展示出来大体上的思路就是这样,下面直接贴代码? <!doctype html> <html> <
基于jQuery实现弹幕APP

今天闲着无聊,写了个弹幕APP,主要实现以下几个功能: 1.点击"弹幕发射"或回车可以输出弹幕到弹幕墙上. 2.弹幕的运行轨迹是从弹幕墙的最右边到最左边,Y轴的数值在弹幕墙的高度内随机,颜色HEX随机,速度随机. 3.右侧的表格可以储存弹幕内容以及弹幕的发射时间,越靠近现在的越靠前. 4.点击"清除弹幕"可以把弹幕墙内的所有弹幕清除掉,但不会影响到表格中的数据. 5.如果弹幕长度过长(我设置的是6个字符),则超过规定长度之外的弹幕内容都会由"...&quo
终于实现了!精彩的jquery弹幕效果

本文实例为大家分享了jquery弹幕效果,供大家参考,具体内容如下页面效果如下: html页面如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

jQuery实现简单弹幕制作

相关推荐

随机推荐