JS+CSS實現數字滾動

時間 2019-11-07

標籤 js+css css 實現數字滾動欄目 CSS 简体版

原文原文鏈接

最近在實現一個顯示RGB顏色數值的動畫效果時，嘗試使用了writing-mode(書寫模式)及 text-orientation來實現文字的豎直方向的排列，並藉助CSS的transition(過渡)來實現動畫效果。關於書寫模式，參考連接[連接描述]1css

各瀏覽器對writing-mode的支持狀況，可在Can I use中查看，而對text-orientation的支持狀況在Can I use中暫不能查到，根據筆者的測試，Chrome/FF/Opera均支持此樣式，而IE/Edge都不支持。暫未在Safari中測試，歡迎各位補充。html

首先，建立數字的容器。由於RGB顏色的範圍是0~255，所以百位數字僅需一、2兩個數字。jquery

<div class="num_span">
        <span class="right">0123456789</span>
        <span class="middle">0123456789</span>
        <span class="left">12</span>
    </div>

接下來添加其CSS樣式，咱們須要將文字的書寫方向改成從上至下，且字符方向是豎直的。使用wrting-mode樣式能夠改變文字的書寫方向，使用text-orientation能夠實現行內字符的旋轉。web

.num_span span {
        float: right;
        /* 書寫模式 */
        writing-mode: vertical-rl;
        /* 控制行內字符的旋轉 */
        text-orientation: upright;
    }

此時，效果如圖
瀏覽器

而後咱們將外層容器設置爲over-flow:hidden，再添加一點JS便可實現數字的滾動效果。主要思路爲，經過js分別獲得數字個位、十位、百位上的數字，並改變對應的margin—top便可。須要注意的是，在數字小於10時，需額外處理一下十位數字的margin-top值，使十位上的數字隱藏。完整的代碼以下。測試

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RollingNumber</title>
    <style>
        .input_center{
            display: block;
            margin: 50px auto 0;
        }
        .num_span {
          border: 1px solid #911004;
          width: 64px;
          overflow: hidden;
          font-size: 20px;
          height: 20px;
          margin: 10px auto; 
        }
        .num_span span {
          float: right;
          width: 20px;
          /* 書寫模式*/
          writing-mode: vertical-rl;
          /* 控制行內字符的旋轉*/
          text-orientation: upright;
          margin-top: 0em; 
          -webkit-transition: margin-top 1.5s ease-out;
          -o-transition: margin-top 1.5s ease-out;
          transition: margin-top 1.5s ease-out;
        }
    </style>
</head>
<body>
    <input type="text" class="input_center" id="valueRGB" placeholder="請輸入0-255之間的數字">
    <div class="num_span">

        <span class="right">0123456789</span>
        <span class="middle">0123456789</span>
        <span class="left">12</span>
    </div>
    
    <script src="jquery-1.11.3.js"></script>
    <script>
        function animate_RGB(rgb){
            let arr = [];
            arr.push(parseInt(rgb/100));
            arr.push(parseInt(rgb%100/10));
            arr.push(parseInt(rgb%10));
            let $div = $(".num_span");
            $div.find('.left').css('margin-top',-arr[0]+1+'em')
            $div.find('.middle').css('margin-top',-arr[1]+'em')
            $div.find('.right').css('margin-top',-arr[2]+'em');
            if(rgb<10){
              $div.find('.middle').css('margin-top','1em');
            }
        }
        $("#valueRGB").on("change",function(){
            let val = parseInt($(this).val());
            if(val>=0&&val<256){
                console.log(val);
                animate_RGB($(this).val());
            }
        });
    </script>
</body>
</html>