jQuery实现弹幕效果（鼠标单击和键盘回车键）

三月.'

于 2022-11-21 23:05:44 发布

阅读量433

点赞数

文章标签： jquery css javascript vscode html

本文链接：https://blog.csdn.net/qq_56715703/article/details/127974460

版权

提示：jQuery代码在下一篇

css内部样式代码:

 html,
    body {
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;
      font-family: "微软雅黑";
      font-size: 62.5%;
    }

    .boxDom {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    .idDom {
      width: 100%;
      height: 100px;
      background: #666;
      position: fixed;
      bottom: 0px;
    }

    .content {
      display: inline-block;
      width: 430px;
      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 {
      border: none;
      width: 300px;
      height: 30px;
      border-radius: 5px;
      font-size: 2.4em;
    }

    .btn {
      width: 60px;
      height: 30px;
      background: #f90000;
      border: none;
      color: #fff;
      font-size: 2.4em;
    }

    span {
      width: 300px;
      height: 40px;
      position: absolute;
      overflow: hidden;
      color: #000;
      font-size: 4em;
      line-height: 1.5em;
      cursor: pointer;
      white-space: nowrap;
    }

html布局：

<div class="boxDom" id="boxDom">
    <div class="idDom" id="idDom">
      <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>

js代码：

//引入jQuery
<script src="../js/jquery.js"></script>
 <script>
    // 绑定点击事件
    $("button").click(show);

    function show() {
      // 创建span
      var $span = $("<span></span>");
      // 赋值操作
      $span.html($('#text').val());

      // 获取随机的top值
      var top = Math.random() * 400;

      // 获取随机的颜色
      var color = "rgb(" + Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + ")";

      // 设置css初始值
      $span.css({
        //left根据屏幕尺寸设置，比选择区尺寸大即可
        left: "1600px",
        top: top,
        color: color,
      });

      // 添加到boxDom
      $("#boxDom").append($span);

      // 设置动画
      $span.animate({ left: "-350px" }, 3000,function(){
          // 动画完成移除这个span
          $(this).remove();
      });
    }

    // 绑定键盘事件
    $(document).keyup(function (ev) {
      if (ev.keyCode == 13) { //回车
        show();
      }
    });
  </script>