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 相关文章推荐
javascript radio 联动效果
Mar 04 Javascript
JavaScript表达式:URL 协议介绍
Mar 10 Javascript
javascript实现动态模态绑定grid过程代码
Sep 22 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
js的三种继承方式详解
Jan 21 Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
Cocos2d实现刮刮卡效果
Dec 20 Javascript
vue 更改连接后台的api示例
Nov 11 Javascript
Vue实现星级评价效果实例详解
Dec 30 Javascript
Javascript异步执行不按顺序解决方案
Apr 30 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
Function eregi is deprecated (解决方法)
2013/06/21 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
javascript获取xml节点的最大值(实现代码)
2013/12/11 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
小程序实现录音功能
2020/09/22 Javascript
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
python代码实现ID3决策树算法
2017/12/20 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
工程造价自荐信
2013/10/09 职场文书
英文版餐饮运营管理求职信
2013/11/06 职场文书
历史专业个人求职信分享
2013/12/20 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
祝寿主持词
2015/07/02 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
行为规范主题班会
2015/08/13 职场文书
教师研修随笔感言
2015/11/18 职场文书