Jquery——弹幕效果

最新推荐文章于 2024-08-16 07:54:47 发布

Zjaun

最新推荐文章于 2024-08-16 07:54:47 发布

阅读量634

点赞数 1

分类专栏： JQ 文章标签： JQuery

本文链接：https://blog.csdn.net/Zjaun/article/details/87214793

版权

本文介绍了如何利用Jquery创建弹幕效果，包括设置css样式以实现弹幕的视觉呈现，调整控件以控制弹幕速度和方向，以及编写核心功能代码来实现动态滚动的弹幕展示。

摘要由CSDN通过智能技术生成

css样式

<style type="text/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;
      backgr