jQuery屏幕放映文字逐渐变大动画效果-jquery案例-前端日记簿

首页 jquery案例正文

jQuery屏幕放映文字逐渐变大动画效果

2023-11-23 73

效果图：

从效果图当中可以清楚的看见当载入页面的时候文字次左侧移动到中间并且从后向前的进行移动直至消失

html：

css中我们将文字进行居中设置然后设置好作为移动的关键帧动画添加代div中

   * {
        padding: 0;
        margin: 0;
        font-size: 62.5%;
      }
      body {
        height: 100vh;
        background: #000;
      }
      .box {
        position: relative;
        width: 70%;
        height: 450px;
        margin: 0 auto;
        overflow: hidden;
        text-align: center;
      }
      .box div {
        position: absolute;
        width: 100%;
        color: #f5e3c5;
        text-align: center;
        margin-top: -20px;
        text-shadow: -3px -3px 5px #f6f7f5;
        animation: slide 3s ease-in 1;
        display: none;
      }
      @keyframes slide {
        0% {
          margin-top: 220px;
          font-size: 12px;
        }
        100% {
          margin-top: 460px;
          font-size: 52px;
          display: none;
        }
      }

紧接着就是在js中创建一个数组其值就是作为我们屏幕中展示的文字以及一个记录数组长度的变量和i

var nameArr = [
    "JAVASCRIPT",
    "css3",
    "HTML5",
    "ANGULARJS",
    "VUEJS",
    "REACT",
    "JAVA8.0",
    "TOMCAT",
    "APPEND",
    "QINGHUADAXUEDEWENZI",
    "CUIWEFFMEN",
    "text-shadow",
    "overflow:hidden",
    "keyframes",
    "charset",
    "nodeName.toLowerCase()",
    "xml.documentElement",
    "xml.getElementsByTagName(parsererror)",
    "中国人",
    "美国人",
    "俄罗斯人",
    "澳大利亚新西兰人",
    "蒙牛伊利三路和非非人民",
  ];
  var num = nameArr.length,
    i = 0;

在addslide中判断当i等数组长度时 i返回不等于返回当前i 然后对页面创建的标签进行判断当长度大于30的时候通过lt选择器选择出当前标签下标小于15的标签然后进行删除

接下来就是创建标签插入节点当中了将当前数组中对应的i下标的值放入到标签当中通过append插入到box中然后给最后一个标签设置一个显示的时间 i++ 然后再次调动定时器

这里为了标签创建过多每隔10秒清除10个标签

完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery屏幕放映文字逐渐变大动画效果</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        font-size: 62.5%;
      }
      body {
        height: 100vh;
        background: #000;
      }
      .box {
        position: relative;
        width: 70%;
        height: 450px;
        margin: 0 auto;
        overflow: hidden;
        text-align: center;
      }
      .box div {
        position: absolute;
        width: 100%;
        color: #f5e3c5;
        text-align: center;
        margin-top: -20px;
        text-shadow: -3px -3px 5px #f6f7f5;
        animation: slide 3s ease-in 1;
        display: none;
      }
      @keyframes slide {
        0% {
          margin-top: 220px;
          font-size: 12px;
        }
        100% {
          margin-top: 460px;
          font-size: 52px;
          display: none;
        }
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div>开始</div>
    </div>
  </body>
</html>
<script src="./js/jquery.js"></script>
<script>
  var nameArr = [
    "JAVASCRIPT",
    "css3",
    "HTML5",
    "ANGULARJS",
    "VUEJS",
    "REACT",
    "JAVA8.0",
    "TOMCAT",
    "APPEND",
    "QINGHUADAXUEDEWENZI",
    "CUIWEFFMEN",
    "text-shadow",
    "overflow:hidden",
    "keyframes",
    "charset",
    "nodeName.toLowerCase()",
    "xml.documentElement",
    "xml.getElementsByTagName(parsererror)",
    "中国人",
    "美国人",
    "俄罗斯人",
    "澳大利亚新西兰人",
    "蒙牛伊利三路和非非人民",
  ];
  var num = nameArr.length,
    i = 0;
  function addSlide() {
    setTimeout(function () {
      i = i == num ? 0 : i;
      if ($(".box div").length > 30) {
        $(".box div:lt(15)").remove();
      }
      var str = `<div>${nameArr[i]}</div>`;
      $(".box").append(str);
      $(".box div").last().show(500);
      i++;
      addSlide();
    }, 500);
  }

  setInterval(function () {
    $(".box div:lt(10)").remove();
  }, 10000);
  addSlide();
</script>

标签：

发表评论：取消回复

原文链接：http://1.15.94.33/?id=227

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。