javascript实现弹幕墙效果


Posted in Javascript onNovember 28, 2019

刚开始入门前端,想仿照FreeCodeCamp中的一个项目制作简单的弹幕墙。

步骤如下:

1、编写HTML代码:

创建一个弹幕显示墙,以及两个按钮,分别为“发送”和“清屏”,并在文本框中设置placeholder为“说点什么吧?”以提示用户在此输入弹幕信息。

<body>
    <div class="con">      
      <div id="screen">
        <div class="dm_show">
          <!-- <div>text message</div> -->
        </div>
      </div>
      <div class="edit">
        <p>
          <input placeholder="说点什么吧?" class="content" type="text" />
        </p>
        <p>
          <input type="button" class="send" value="发送" />
          <input type="button" class="clear" value="清屏" />
        </p>
      </div>   
    </div>
  </body>

2、设置各标签的CSS样式:

<style>
      .con {
        background-color: floralwhite;
        padding: 40px 80px 80px;
      }
      #screen {
        background-color: #fff;
        width: 100%;
        height: 380px;
        border: 1px solid rgb(229, 229, 229);
        font-size: 14px;
      }

      .content {
        border: 1px solid rgb(204, 204, 204);
        border-radius: 3px;
        width: 320px;
        height: 35px;
        font-size: 14px;
        margin-top: 30px;

      }

      .send {
        border: 1px solid rgb(230, 80, 30);
        color: rgb(230, 80, 0);
        border-radius: 3px;
        text-align: center;
        padding: 0;
        height: 35px;
        line-height: 35px;
        font-size: 14px;
        width: 159px;
        background-color: white;
      }

      .clear {
        border: 1px solid;
        color: darkgray;
        border-radius: 3px;
        text-align: center;
        padding: 0;
        height: 35px;
        line-height: 35px;
        font-size: 14px;
        width: 159px;
        background-color: white;
      }

      .edit {
        margin: 20px;
        text-align: center;
      }

      .text {
        position: absolute;
      }
      *{
        margin: 0;
        padding: 0;
      }

      .dm_show{
        margin: 30px;
      }
</style>

CSS代码完成后效果如下:

完成后的效果如下:

javascript实现弹幕墙效果

3、编写JavaScript代码,添加按钮点击事件

<script type="text/javascript" src="../jquery-easyui-1.3.5/jquery.min.js"></script>
<script>
      $(function() {
        //设置“发送”按钮点击事件,将弹幕体显示在弹幕墙上
        $('.send').click(function() {
          //获取文本输入框的内容
          var val = $('.content').val();
          //将文本框的内容赋值给val后,将文本框的内容清除,以便用户下一次输入
          $('.content').val('');
          //将文本框内容用div包裹起来,便于后续处理
          var $content = $('<div class="text">' + val + '</div>');
          //获取弹幕墙对象
          $screen = $(document.getElementById("screen"));
          //设置弹幕体出现时的上边距,为任意值
          var top = Math.random() * $screen.height()+40;
          //设置弹幕体的上边距和左边距
          $content.css({
            top: top + "px",
            left: 80
          });
          //将弹幕体添加到弹幕墙中
          $('.dm_show').append($content);
          //弹幕体从左端移动到最右侧,时间为8秒,然后直接删除该元素
          $content.animate({
            left: $screen.width()+80-$content.width()
          }, 8000, function() {
            $(this).remove();
          });
        });
        //设置“清屏”点击事件,清除弹幕墙中的所有内容
        $('.clear').click(function() {
          $('.dm_show').empty();
        });
      });
</script>

最终效果如下:

javascript实现弹幕墙效果

至此,一个简易的弹幕墙就完成了,因本人经验有限,所以弹幕墙还比较粗糙,还请各位批评指正。

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

Javascript 相关文章推荐
js chrome浏览器判断代码
Mar 28 Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
js实现div弹出层的方法
Nov 20 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
Jan 05 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 Javascript
微信小程序自定义可滑动日历界面
Dec 28 Javascript
vue滚动tab跟随切换效果
Jun 29 Javascript
微信小程序实现时间进度条功能
Nov 17 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
jquery实现直播弹幕效果
Nov 28 #jQuery
jQuery实现简单弹幕效果
Nov 28 #jQuery
微信小程序事件流原理解析
Nov 27 #Javascript
JS实现简单省市二级联动
Nov 27 #Javascript
Angular value与ngValue区别详解
Nov 27 #Javascript
原生js实现二级联动菜单
Nov 27 #Javascript
微信小程序wxml列表渲染原理解析
Nov 27 #Javascript
You might like
php的正则处理函数总结分析
2008/06/20 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
最常用的12种设计模式小结
2011/08/09 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
js实现上传图片之上传前预览图片
2013/03/25 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
js动态切换图片的方法
2015/01/20 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
Python解析json文件相关知识学习
2016/03/01 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
Python 获取项目根路径的代码
2019/09/27 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
公务员政审个人鉴定
2014/02/25 职场文书
单位未婚证明范本
2014/11/25 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
担保贷款承诺书
2015/04/30 职场文书
老公出轨后的保证书
2015/05/08 职场文书
中学教师读书笔记
2015/07/01 职场文书
MySQL如何构建数据表索引
2021/05/13 MySQL
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技