jQuery数字变化滚动效果代码-jquery案例-前端日记簿

首页 jquery案例正文

jQuery数字变化滚动效果代码

2023-11-17 72

效果图：

在效果中每一个数字都在进行向上滚动达到它对应的数字

html：
在视图层创建一个demo 其余标签通过js创建插入

我们声明一个对象event 封装三个函数分别是

number方法是作用是接收一个参数创建一个新数组通过对传入参数的长度进行遍历然后通过charAt查找对应索引的参数添加到数组当中在遍历结束返回该数组

第二个方法是创建demo节点当前方法去·接收一个数组对该数组进行遍历通过索引去查找传入的数组中对应的参数

通过parseInt方法去将字符串转化为整数大于零时创建一个div以及从一到九的span标签在div上创建一个自定义属性并赋值添加到str中

如果不大于零则直接赋值

 demo(arr) {
        var str = "";
        for (let i = 0; i < arr.length; i++) {
          console.log(arr[i]);
          if (parseInt(arr[i]) >= 0) {
            str += `<div class="l js-box digit-container" data-num="${arr[i]}">
                   <span>0</span>
                   <span>1</span>
                   <span>2</span>
                   <span>3</span>
                   <span>4</span>
                   <span>5</span>
                   <span>6</span>
                   <span>7</span>
                   <span>8</span>
                   <span>9</span>
                 </div>`;
          } else {
            str += `<div class="sign-box l"><span>${arr[i]}</span></div>`;
          }
        }
        return str;
      },

第三个方法就是动画了先获取到js-box的高度并打印判断类型

然后选中所有.js-box的demo 进行遍历获取达到当前遍历demo上面的自定义属性值声明一个scrollTop为0

将获取到自定义的属性值乘以类js-box的高度

在动画之前先将当前的margin-top设置为0 再通过animate进行设置因为向上运动所以margin-top为负，时间为1.5s margin-top越大翻滚越快

最后将我们需要滚动的值按步骤先使用number方法进行处理然后再进行节点创建最后进行动画滚动

完整代码：

<!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;
      }
      body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .box {
        height: 44px;
        overflow: hidden;
      }
      .box span {
        display: inline-block;
        background: -webkit-gradient(
          linear,
          0 0,
          0 bottom,
          from(#fef637),
          to(#f90)
        );
        background: gradient(linear, 0 0, 0 bottom, from(#fef637), to(#f90));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        width: 30px;
        height: 44px;
        font-size: 44px;
        line-height: 44px;
      }
      .box .sign-box span {
        width: 15px;
      }
      .box .digit-container {
        width: 30px;

        text-align: center;
        overflow: hidden;
        font-size: 0;
      }
      .l {
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="js-box box"></div>
  </body>
</html>
<script src="./js/jquery.js"></script>
<script>
  $(function () {
    var event = {
      number(num) {
        var numArr = [];
        for (let i = 0; i < num.length; i++) {
          numArr.push(num.charAt(i));
        }
        return numArr;
      },
      demo(arr) {
        var str = "";
        for (let i = 0; i < arr.length; i++) {
          console.log(arr[i]);
          if (parseInt(arr[i]) >= 0) {
            str += `<div class="l js-box digit-container" data-num="${arr[i]}">
                   <span>0</span>
                   <span>1</span>
                   <span>2</span>
                   <span>3</span>
                   <span>4</span>
                   <span>5</span>
                   <span>6</span>
                   <span>7</span>
                   <span>8</span>
                   <span>9</span>
                 </div>`;
          } else {
            str += `<div class="sign-box l"><span>${arr[i]}</span></div>`;
          }
        }
        return str;
      },
      animation() {
        var height = $(".js-box").height();
        console.log(typeof height);
        $(".js-box").each(function (i) {
          var num = parseInt($(this).data("num"));
          var scrollTop = 0;
          scrollTop = height * num;
          $(this).css("margin-top", 0);
          $(this).animate({ marginTop: -scrollTop }, 1500);
          console.log(scrollTop);
        });
      },
    };
    var slideArr = event.number("510,085.12");
    $(".js-box").html(event.demo(slideArr));
    event.animation();
  });
</script>

标签：

发表评论：取消回复

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

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

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