基于JavaScript实现弹幕特效

2024-10-24 13:53:53

本文实例为大家分享了js实现弹幕特效的具体代码，供大家参考，具体内容如下

此处使用HBuilder编译，最简单的弹幕效果，希望各位前辈不吝指教。

注意用的是jquery-2.0.3.js

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
 </head> 

 <style type="text/css">
  *{
   padding: 0;
   margin: 0;
  }
  .shooter{
   width: 600px;
   height: 60px;
   /*background: black;*/
   margin: 0 auto;
  }
  .shooter input{
   width: 300px;
   height: 40px;
   border: none;
   border-radius: 7px;
   box-shadow: 0 0 8px rgba(182,195,214,0.6)inset;
   padding-left: 15px;
   margin-top: 10px;
  }
  .shooter button{
   width: 80px;
   height: 40px;
   border: none;
   margin-left: 10px;
   background-color:#339B53;
   border-radius:8px;
   color: white;
   cursor: pointer;
  } 

  .shooter button:hover{
   font-size: 14px;
   background:#008000;
  }
  .content{
   width: 100%;
   height: 600px;
   background: gray;
   position: relative;
   overflow: hidden;
  } 

  .bullet{
   position: absolute;
   /*right: 0;*/
   /*left:1600px;*/
   word-break: keep-all;
   /*不让单词折行*/ 

  } 

 </style> 

 <body>
  <div class="shooter"> 

   <input type="text"/>
   <button>发射</button> 

  </div>
  <div class="content"> 

  </div>
  <script type="text/javascript" src="js/jquery-2.0.3.js" ></script> 

  <script type="text/javascript">
   $("button").click(function(){ 

    var msg = $("input").val();
    //取出输入框内容 

    if(msg.length > 15){ 

     alert("字数不得超过15个！");
     return;
    } 

    var bullet = $("<div>");
    //生成一条弹幕
    bullet.text(msg);
    //将输入框内容放置到div中
    bullet.addClass("bullet");
    //为bullet这个div添加样式bullet
    bullet.css("top",Math.round(Math.random()*500));
    //随机设置弹幕位置
    bullet.css("left","1600px");
    bullet.css("font-size",Math.round(Math.random()*60)+12+"px");
    bullet.css("color","rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")");
//    alert(window.getComputedStyle(bullet,null).width);
    bullet.animate({
     left:-1000//此处视为bug，应该随着弹幕的长短而变化
    },Math.round(Math.random()*9000)+1000,"linear", function(){
     bullet.remove();
     //当运动结束时，删除弹幕
    }); 

    $(".content").append(bullet);
    //将弹幕添加到屏幕中 

   });
  </script>
 </body>
</html>

下面是展示的弹幕效果（显示的白线在谷歌浏览器中是看不出来的，在录制时会看出来，此处又一bug）：

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

基于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弹幕效果

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

不知大家有没有感受到,弹幕又是另一出好戏!! 不过我个人还是比较排斥看电视的时候被出来的弹幕打扰.今天我们来写一个简单的弹幕.简单到什么程度呢?看下效果: 由图可以看出,我们的呆毛html结构确实是非常简单啦. 就是由一个div.一个input框另加一个button组成. <div id="box" class="box"></div> <input type="text" id="txt" /&
又一枚精彩的弹幕效果jQuery实现

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

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

一.代码 html+js <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>数发直播平台</title> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="styl
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;
canvas 弹幕效果（实例分享）

话不多说,请看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas style="width: 1280px;height: 720px;background-color: rgba(0

基于JavaScript实现弹幕特效

相关推荐

随机推荐