文字弹幕效果

简介: 文字弹幕效果

效果预览

文字弹幕效果

http部分

<body>
    <div class="box" id="box">
      <div class="bot-nav" id="bot-nav">
        <div class="content">
          <p class="title">吐槽:</p>
          <input type="text" class="text" id="text" />
          <button type="button" class="btn" id="btn">发射</button>
        </div>
      </div>
    </div>
  </body>

css部分

html,
    body {
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;
      font-family: "微软雅黑";
      font-size: 62.5%;
    }
    .box {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }
    .bot-nav {
      width: 100%;
      height: 100px;
      background: #666;
      position: fixed;
      bottom: 0px;
    }
    .content {
      display: inline-block;
      width: 450px;
      height: 40px;
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
      margin: auto;
    }
    .title {
      display: inline;
      font-size: 4em;
      vertical-align: bottom;
      color: #fff;
    }
    .text {
      outline: none;
      border: none;
      width: 300px;
      height: 30px;
      border-radius: 5px;
      font-size: 2.4em;
      padding: 0px 10px;
    }
    .btn {
      outline: none;
      width: 60px;
      height: 30px;
      background: #f90000;
      border: none;
      color: #fff;
      font-size: 2.4em;
      cursor: pointer;
    }
    span {
      width: 300px;
      height: 40px;
      position: absolute;
      overflow: hidden;
      color: #000;
      font-size: 4em;
      line-height: 1.5em;
      cursor: pointer;
      white-space: nowrap;
    }

js部分

$(document).ready(function() {
      // 随机颜色
      var colors = ["red", "green", "hotpink", "pink", "cyan", "yellowgreen", "purple", "deepskyblue"];
      // 注册按钮点击事件
      $("#btn").click(function() {
        // 获取随机颜色
        var randomColor = parseInt(Math.random() * colors.length);
        // 获取随机坐标
        var randomY = parseInt(Math.random() * 700);
        $("<span></span>")            // 创建span
          .text($("#text").val())       // 设置内容
          .css("color", colors[randomColor])  // 设置字体颜色
          .css("left", "1920px")        // 设置left值
          .css("top", randomY)        // 设置top值
          .animate({
            left: -500
          }, 10000, "linear", function() {
            $(this).remove();         // 到达终点,删除span元素
          })
          .appendTo("#box");          // 添加动画效果
        $("#text").val("");           // 输入完成,清空文本框内容
      });
      $("#text").keyup(function(e) {        // 注册键盘抬起事件,检测回车键
        if(e.keyCode == 13) {
          $("#btn").click();
        }
      });
    });

整体代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sample040 - 文字弹幕效果</title>
    <link rel="stylesheet" type="text/css" href="css/basic.css" />
    <script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <style type="text/css">
    html,
    body {
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;
      font-family: "微软雅黑";
      font-size: 62.5%;
    }
    .box {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }
    .bot-nav {
      width: 100%;
      height: 100px;
      background: #666;
      position: fixed;
      bottom: 0px;
    }
    .content {
      display: inline-block;
      width: 450px;
      height: 40px;
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
      margin: auto;
    }
    .title {
      display: inline;
      font-size: 4em;
      vertical-align: bottom;
      color: #fff;
    }
    .text {
      outline: none;
      border: none;
      width: 300px;
      height: 30px;
      border-radius: 5px;
      font-size: 2.4em;
      padding: 0px 10px;
    }
    .btn {
      outline: none;
      width: 60px;
      height: 30px;
      background: #f90000;
      border: none;
      color: #fff;
      font-size: 2.4em;
      cursor: pointer;
    }
    span {
      width: 300px;
      height: 40px;
      position: absolute;
      overflow: hidden;
      color: #000;
      font-size: 4em;
      line-height: 1.5em;
      cursor: pointer;
      white-space: nowrap;
    }
  </style>
  <body>
    <div class="box" id="box">
      <div class="bot-nav" id="bot-nav">
        <div class="content">
          <p class="title">吐槽:</p>
          <input type="text" class="text" id="text" />
          <button type="button" class="btn" id="btn">发射</button>
        </div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    $(document).ready(function() {
      // 随机颜色
      var colors = ["red", "green", "hotpink", "pink", "cyan", "yellowgreen", "purple", "deepskyblue"];
      // 注册按钮点击事件
      $("#btn").click(function() {
        // 获取随机颜色
        var randomColor = parseInt(Math.random() * colors.length);
        // 获取随机坐标
        var randomY = parseInt(Math.random() * 700);
        $("<span></span>")            // 创建span
          .text($("#text").val())       // 设置内容
          .css("color", colors[randomColor])  // 设置字体颜色
          .css("left", "1920px")        // 设置left值
          .css("top", randomY)        // 设置top值
          .animate({
            left: -500
          }, 10000, "linear", function() {
            $(this).remove();         // 到达终点,删除span元素
          })
          .appendTo("#box");          // 添加动画效果
        $("#text").val("");           // 输入完成,清空文本框内容
      });
      $("#text").keyup(function(e) {        // 注册键盘抬起事件,检测回车键
        if(e.keyCode == 13) {
          $("#btn").click();
        }
      });
    });
  </script>
</html>

网页效果

相关文章
|
监控
基于videoPlayer实现视频播放联动文字播报功能
基于videoPlayer实现视频播放联动文字播报功能
215 0
|
6月前
|
数据采集 JSON 数据格式
抓个电影弹幕
抓个电影弹幕
95 0
|
5月前
|
API Docker 容器
SenseVoice实现语音转文字
这篇文章介绍了如何使用SenseVoice实现语音转文字的功能,包括通过Docker部署服务、使用网页界面或API进行语音文件的转换,并提供了详细的部署与使用步骤。
816 1
SenseVoice实现语音转文字
|
7月前
|
JSON 自然语言处理 数据挖掘
兴安岭大马猴多惊悚?16978条弹幕告诉你!
兴安岭大马猴多惊悚?16978条弹幕告诉你!
94 1
|
7月前
|
测试技术 语音技术 Android开发
起飞,纯本地实时语音转文字!
起飞,纯本地实时语音转文字!
220 3
|
9月前
|
JavaScript Java 关系型数据库
视频弹幕网站设计01-我爱发弹幕
视频弹幕网站设计01-我爱发弹幕
|
9月前
|
存储 前端开发 JavaScript
视频弹幕设计网站11-----绘制弹幕
视频弹幕设计网站11-----绘制弹幕
|
9月前
|
前端开发 JavaScript
弹幕视频设计网站13---------绘制弹幕03
弹幕视频设计网站13---------绘制弹幕03
|
9月前
|
存储 前端开发
弹幕视频设计网站12------绘制弹幕02
弹幕视频设计网站12------绘制弹幕02
|
10月前
|
小程序
【经验分享】使用swiper组件制作文字上下滚动播报效果
【经验分享】使用swiper组件制作文字上下滚动播报效果
352 6