js实现弹幕墙效果


Posted in Javascript onDecember 10, 2020

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

1.首先要考虑弹幕墙需要什么:一面墙,输入框,发射按钮,关闭和开启弹幕按钮,在此关闭和开启设置为同一个按钮;
2.其次弹幕上墙以后需要移动,从墙的最右边移动到最左边,当移动到最左边时,这条弹幕就要消失;
3.初步的想法应该就是当在输入框输入你要发送的内容,点击发送按钮,在墙上会新建一个div来包含这条弹幕内容,再给这个div相应的移动动画class;

4.弹幕颜色随机,单条弹幕之间有间隔;

取随机颜色这里用的是

"#"+(Math.random()*0x1000000<<0).toString(16)

首先,写出它的静态页面;

<!--墙-->
<h1>弹幕墙</h1>
<div id="container">

</div>
<!--弹幕发送关闭-->
<div class="s_c">
  <input id="message" type="text" placeholder="说点什么">
  <div class="btn">
    <button id="sent">发射弹幕</button>
    <button id="clear">关闭弹幕</button>
  </div>
</div>

css样式

#container{
  /*width:700px;*/
  height:500px;
  margin:50px 100px;
  border:solid 2px #7a2a1d;
}
h1{
  text-align:center;
}
.s_c{
  width:500px;
  margin:0 auto;
}
#message{
  width:400px;
  height:30px;
  margin:0 auto;
  position:relative;
  left:50px;
}
.btn{
  padding-top:20px;
  height:30px;
  margin-left:150px;
}
#sent,#clear{
  width:100px;
}

js代码部分:

var arr = [];//用于保存弹幕数据的数组;
var start = true;//用于判断是否需要开启弹幕
  $(document).ready(function(){
    var showscreen = $("#container");//弹幕墙的div
    var showHeight = showscreen.height();//弹幕墙div的高度
    var showWidth = showscreen.width();//弹幕墙div的宽度
    //点击发射按钮事件
    $("#sent").click(function(){
      var text = $("#message").val();//获取用户输入的待发送弹幕
      $("#message").val("");//清空弹幕发送区
      arr.push(text);//将数据存入实现定义好的用于保存弹幕数据的数组
      var send_div=$("<div>"+text+"</div>");
      showscreen.append(send_div);
      // var send_text=$("<div>+text+</div>");//新建div弹幕条
      // var send_div = document.createElement("div");
      // var inner = document.createTextNode(text);
      // send_div.appendChild(inner);
      // document.getElementById("container").appendChild(send_div)//把弹幕挂在墙上
      move_text(send_div);
    })
    //按回车发送
     $("input").keydown(function(event){
       if(event.keyCode == 13){
         $("#sent").trigger("click");//trigger触发被选元素的指定事件类型,触发#send事件的click类型
       }
     })

     if(start==false){
       start = true;
       $("#clear").html("关闭弹幕");
       run();
     }
     //关闭/开启弹幕按钮点击事件
    $("#clear").click(function(){
      if(start == true){
        start = false;
        $("#clear").html("开启弹幕");
        showscreen.empty();
      }else if(start == false){
        start = true;
        $("#clear").html("关闭弹幕");
        run()
      }
    });
     var topMin = showscreen.offset().top;
     var topMax = topMin+showHeight;
     var top = topMin;
     var move_text = function(obj){
       obj.css({
         display:"inline",
         position:"absolute"
       })
       var begin = showscreen.width() - obj.width(); //一开始的起点
       top+=50;

       if(top > topMax-50){
         top = topMin;
       }
       //console.log("showscreenWidth"+showscreen.width());
       //console.log("objWidth",obj.width());

       obj.css({
         left:begin,
         top:top,
         color:getRandomColor()
       });

       var time = 20000 + 10000*Math.random();
       obj.animate({
         left:"-"+begin+"px"
       },time,function(){
         obj.remove();
       });
     };
    var getRandomColor = function(){
      return '#'+('00000'+(Math.random()*0xffffff <<0).toString(16)).substr(-6);
    }

    var run = function(){
      if(start == true){
        if(arr.length > 0){
          var n = Math.floor(Math.random()* arr.length + 1)-1;
          var textObj = $("<div>"+arr[n]+"</div>");
          showscreen.append(textObj);
          //console.log("loop:"+textObj.html());
          move_text(textObj);
        }
      }
      setTimeout(run,3000);
    }

    jQuery.fx.interval = 50;
    run();
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
关于 文本框默认值 的操作js代码
Jan 12 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
浅谈vuex之mutation和action的基本使用
Aug 29 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
jQuery实现简单弹幕制作
Dec 10 #jQuery
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 #Vue.js
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 #Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 #Vue.js
微信小程序实现天气预报功能(附源码)
Dec 10 #Javascript
微信小程序向Java后台传输参数的方法实现
Dec 10 #Javascript
微信小程序反编译的实现
Dec 10 #Javascript
You might like
php的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
php生成无限栏目树
2017/03/16 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
学习JavaScript设计模式(多态)
2015/11/25 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
IE8兼容Jquery.validate.js的问题
2016/12/01 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
Python 模拟购物车的实例讲解
2017/09/11 Python
numpy中矩阵合并的实例
2018/06/15 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
Python加速程序运行的方法
2020/07/29 Python
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
查环查孕证明
2014/01/10 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
Ajax常用封装库——Axios的使用
2021/05/08 Javascript