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 相关文章推荐
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
JS实现向表格中动态添加行的方法
Mar 30 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 Javascript
概述javascript在Google IE中的调试技巧
Nov 24 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 Javascript
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
基于pear auth实现登录验证
2010/02/26 PHP
深入PHP与浏览器缓存的分析
2013/06/03 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
PHP比你想象的好得多
2014/11/27 PHP
php查找字符串出现次数的方法
2014/12/01 PHP
PHP5.3新特性小结
2016/02/14 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
cakephp常见知识点汇总
2017/02/24 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
javascript 窗口加载蒙板 内嵌网页内容
2010/11/19 Javascript
jQuery 源码分析笔记(3) Deferred机制
2011/06/19 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
python使用append合并两个数组的方法
2015/04/28 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
OpenCV 边缘检测
2019/07/10 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
华为c/c++笔试题
2016/01/25 面试题
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
网吧消防安全制度
2014/01/28 职场文书
质检部经理岗位职责
2014/02/19 职场文书
21岁生日感言
2014/02/27 职场文书
人力资源管理专业应届生求职信
2014/04/24 职场文书
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS
Python内置数据结构列表与元组示例详解
2021/08/04 Python