美文网首页
vue,使用jquery的数字翻牌效果

vue,使用jquery的数字翻牌效果

作者: 衬fzy | 来源:发表于2022-03-26 15:41 被阅读0次
    image.png

    在vue项目的index.html文件引入,最后面粘贴number.js代码

    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript" src="./number.js"></script>
    

    下面是组件样式和调用代码

    <template>
      <div class="box0">
        <div id="dataNums"></div>
      </div>
    </template>
    <script>
    export default {
      mounted() {
        this.setData();
      },
      methods: {
        setData() {
          // eslint-disable-next-line no-undef
          $("#dataNums").rollNum({
            deVal: "842,858,760"
          });
        }
      }
    };
    </script>
    <style lang="scss">
    .box0 {
      width: 100%;
      height: 100%;
    
      #dataNums {
        width: 100%;
        height: 65px;
        position: relative;
        top: -0.5vh;
      }
      .dataNums {
        position: absolute;
        display: block;
        height: 65px;
        text-align: center;
        left: 50%;
        transform: translateX(-50%);
        padding: 0;
      }
    
      .dataNums .dataOne {
        width: 36px;
        height: 50px;
        margin: 0px 5px;
        text-align: center;
        border: 1px solid #00fbff;
        font-family: "Arial";
        border-radius: 5px;
        float: left;
        list-style: none;
      }
    
      .dataNums .dataBoc {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    
      .dataNums .dataBoc .tt {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    
      .dataNums .dataLine {
        position: relative;
        margin: 0 !important;
        width: 15px !important;
        border: 0 !important;
        left: -2px !important;
      }
      .dataNums .dataLine .dataBoc .tt {
        height: 30px !important;
        line-height: 0px;
        top: initial;
        bottom: 0px;
        color: #fff;
      }
    
      .dataNums .tt span {
        width: 100%;
        height: 100%;
        color: #fff;
        font-size: 43px;
        font-weight: 600;
        line-height: 50px;
        float: left;
      }
    
      @media screen and (max-width: 1320px) {
        .dataNums {
          height: 120px;
        }
    
        .dataNums .dataOne {
          width: 70px;
          height: 120px;
        }
    
        .dataNums .tt span {
          font-size: 100px;
          line-height: 120px;
        }
    
        .dataLine {
          line-height: 175px;
        }
      }
    
      .dataNum1 {
        position: absolute;
        top: 56%;
        width: 20%;
        float: left;
        /* padding-right: 4%; */
        font-size: 36px;
        text-align: center;
        left: 17%;
      }
    
      .dataNum2 {
        position: absolute;
        top: 56%;
        width: 20%;
        float: left;
        font-size: 36px;
        text-align: center;
        left: 40%;
      }
    
      .dataNum3 {
        position: absolute;
        top: 56%;
        width: 20%;
        float: left;
        padding-left: 5%;
        font-size: 36px;
        text-align: center;
        left: 60%;
      }
    
      .dataIcon {
        font-size: 67px;
        float: left;
      }
    }
    </style>
    
    

    使用方式:

    <div><Number1></Number1></div>
    import Number1from "./number1";
    components: { Number1},
    

    number.js代码

    // 鏁板瓧婊氬姩
    var defaults = {
      deVal: 0, // 浼犲叆鍊�
      className: "dataNums", // 鏍峰紡鍚嶇О
      digit: "" // 榛樿鏄剧ず鍑犱綅鏁板瓧
    };
    function rollNum(obj, options) {
      this.obj = obj;
      this.options = $.extend(defaults, options);
      this.init = function() {
        this.initHtml(obj, defaults);
      };
    }
    rollNum.prototype = {
      initHtml: function(obj, options) {
        console.log(obj, options.deVal);
        var nameDeVal = options.deVal.split("");
        var strHtml = '<ul class="' + options.className + ' inrow">';
        var valLen = options.digit || (options.deVal + "").length;
        if (obj.find("." + options.className).length <= 0) {
          for (var i = 0; i < valLen; i++) {
            if (nameDeVal[i] == ",") {
              strHtml +=
                '<li class="dataOne dataLine" style="width:30px;background:none;font-size:69px;"><div class="dataBoc"><div class="tt" t="38" ><em class="num0">,</em></div></div></li>';
            }
            if (nameDeVal[i] == ".") {
              strHtml +=
                '<li class="dataOne dataLine" style="width:30px;background:none;font-size:69px;"><div class="dataBoc"><div class="tt" t="38"><em class="num0">.</em></div></div></li>';
            }
            if (nameDeVal[i] != "," && nameDeVal[i] != ".") {
              strHtml +=
                '<li class="dataOne "><div class="dataBoc"><div class="tt" t="38"><span class="num0">0</span> <span class="num1">1</span> <span class="num2">2</span> <span class="num3">3</span> <span class="num4">4</span><span class="num5">5</span> <span class="num6">6</span> <span class="num7">7</span> <span class="num8">8</span> <span class="num9">9</span><span class="num0">0</span> <span class="num1">1</span> <span class="num2">2</span> <span class="num3">3</span> <span class="num4">4</span><span class="num5">5</span> <span class="num6">6</span> <span class="num7">7</span> <span class="num8">8</span> <span class="num9">9</span><span class="num10">,</span><span class="num11">.</span></div></div></li>';
            }
          }
          strHtml += "</ul>";
          obj.html(strHtml);
        }
        this.scroNum(obj, options);
      },
      scroNum: function(obj, options) {
        var number = options.deVal;
        var $num_item = $(obj)
          .find("." + options.className)
          .find(".tt");
        var h = $(obj)
          .find(".dataBoc")
          .height();
        $num_item.css("transition", "all 2s ease-in-out");
        var numberStr = number.toString();
        if (numberStr.length <= $num_item.length - 1) {
          var tempStr = "";
          for (var a = 0; a < $num_item.length - numberStr.length; a++) {
            tempStr += "0";
          }
          numberStr = tempStr + numberStr;
        }
    
        var numberArr = numberStr.split("");
        $num_item.each(function(i, item) {
          setTimeout(function() {
            if (numberArr[i] == ",") {
              $num_item.eq(i).html(",");
              $num_item
                .eq(i)
                .css({
                  "font-size": "69px",
                  background: "none",
                  transition: "none"
                });
            }
            if (numberArr[i] == ".") {
              $num_item
                .eq(i)
                .html(".")
                .css({
                  "font-size": "69px",
                  background: "none",
                  transition: "none"
                });
              // $num_item.eq(i)
            }
            if (numberArr[i] != "," && numberArr[i] != ".") {
              $num_item
                .eq(i)
                .css("top", -parseInt(numberArr[i]) * h - h * 10 + "px");
            }
          }, i * 150);
        });
      }
    };
    $.fn.rollNum = function(options) {
      var $that = this;
      var rollNumObj = new rollNum($that, options);
      rollNumObj.init();
    };
    
    

    感谢大家点赞!

    相关文章

      网友评论

          本文标题:vue,使用jquery的数字翻牌效果

          本文链接:https://www.haomeiwen.com/subject/ylorjrtx.html