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 相关文章推荐
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 Javascript
JS设置cookie、读取cookie
Feb 24 Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
基于vue的短信验证码倒计时demo
Sep 13 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
node.js制作一个简单的登录拦截器
Feb 10 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 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动态创建Flash动画
2006/10/09 PHP
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
php实现点击可刷新验证码
2015/11/07 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
python处理PHP数组文本文件实例
2014/09/18 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
python面向对象 反射原理解析
2019/08/12 Python
pandas数据处理进阶详解
2019/10/11 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
大学生职业生涯规划书范文
2014/01/04 职场文书
个人自我评价范文
2014/02/05 职场文书
开业主持词
2014/03/21 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书