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 相关文章推荐
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
Jul 06 Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 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
无限级别菜单的实现
2006/10/09 PHP
PHP 分页原理分析,大家可以看看
2009/12/21 PHP
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
原生js实现购物车
2020/09/23 Javascript
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
Python监控主机是否存活并以邮件报警
2015/09/22 Python
Python heapq使用详解及实例代码
2017/01/25 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
热情服务标语
2014/10/07 职场文书
出差报告格式模板
2014/11/06 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
建国大业观后感800字
2015/06/01 职场文书
vue3引入highlight.js进行代码高亮的方法实例
2022/04/08 Vue.js
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技