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 相关文章推荐
广告显示判断
Aug 31 Javascript
屏蔽Flash右键信息的js代码
Jan 17 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 Javascript
JavaScript数据结构之链表的实现
Mar 19 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
JS简单生成由字母数字组合随机字符串示例
May 25 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 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
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
解析php中heredoc的使用方法
2013/06/17 PHP
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
yii中widget的用法
2014/12/03 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
javascript 读取图片文件的大小
2009/06/25 Javascript
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
简单几步实现返回顶部效果
2016/12/05 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
简单两步使用node发送qq邮件的方法
2019/03/01 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
python类中super()和__init__()的区别
2016/10/18 Python
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
2014年消防工作总结
2014/11/21 职场文书
初中运动会前导词
2015/07/20 职场文书
四群教育工作总结
2015/08/10 职场文书
小学班主任工作随笔
2015/08/15 职场文书
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL