js如何实现弹幕效果

前端  /  管理员 发布于 7年前   194

具体步骤如下：

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代码完成后部分截图如下：

499aafd194084861a5b2833068c6baf.png

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>

最终效果部分截图如下：

1da0d2305f51a7aa1b6a4826c5a49ef.png
相关教程推荐：js教程

以上就是js如何实现弹幕效果的详细内容，更多请关注其它相关文章！


  • 上一条：
    css中的content属性该如何使用
    下一条：
    css如何实现给div添加滚动并隐藏滚动条

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客