數字跳動放大

時間 2020-08-18

標籤數字跳動放大简体版

原文原文鏈接

我的以爲蠻有意思的寫法，能夠考慮用進項目裏javascript

點擊看效果democss

<!DOCTYPE html>
<div lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./demo.css" />
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <style>
        .person_atten_r{
            height: 34px;
            padding: 0 5px;
            display: inline-block;
        }
        .person_atten .num {
            height: 23px;
            font-size: 18px;
            color: #333;
        }
        #sendNum{
            zoom: 1;
            opacity: 1;
        }
        .num a{
            text-decoration: none;
        }
    </style>
</head>
<div>
    <div class="demo-container">
        <div class="header">
            <i>
                <b>數字閃現放大動畫</b>
            </i>
        </div>
        <div class="method-title">
            數字放大
        </div>
        <div class="method-container">
            <button class="tc-btn" >放大</button>
            <div class="person_atten_r" style="position: relative;">
                <p class="num">
                    <strong style="width:46px; height:28px; line-height:28px; left:-4px; top:-3px; text-align:center;">
                        <a href="javascript:void(0);" id="sendNum">166</a>
                        <a href="#no" id="absNum" style="position:absolute; width:46px; height:28px; left:-3px; top:15px; display:none;"></a>
                    </strong>
                </p>
                <!-- <p></p> -->
               
            </div>
        </div>
    </div>
    <script>
        $('.tc-btn').click(function(e) {
            number(document.getElementById("absNum"), document.getElementById("sendNum"), 18, 26);
        });
        // setInterval(function() {
        //     $('.tc-btn').click();
        // }, 1000);
        var number = function(node,aim,minnum,maxnum){
            var num = parseInt(aim.innerHTML,10); //獲取sendNum的數字
            aim.style.zoom = 1;
            node.style.display = "inline-block";
            node.innerHTML = num;
            var fontSize = minnum; //字體18
            var opacity = 1;
            var step = function(){		
                fontSize+=1; //字體逐漸放大
                opacity-=0.09; //增長透明
                node.style.fontSize = fontSize + "px";
                node.style.opacity = opacity;
                aim.style.opacity = opacity;

                node.style.filter = "Alpha(opacity="+opacity*100+")"; //IE下使用半透明須要使用IE半透明濾鏡
                aim.style.filter = "Alpha(opacity="+opacity*100+")";
                node.style.zoom = 1; //設置a標籤zoom爲1的代碼，是爲了使其haslayout，IE半透明濾鏡才能夠生效。

                if(fontSize < maxnum){
                    setTimeout(step,40); //沒超過最大上限繼續放大
                }else{

                    //超過最大上限數字加1，開始縮小
                    num+=1;
                    node.innerHTML = num;
                    aim.innerHTML = num;
                    setTimeout(step2,40);	
                }
            };
            setTimeout(step,10);
            var step2 = function(){

                //這部分代碼和上面放大字體的相似
                fontSize-=1;
                opacity+=0.09;
                node.style.fontSize = fontSize + "px";
                node.style.opacity = opacity;
                aim.style.opacity = opacity;
                node.style.filter = "Alpha(opacity="+opacity*100+")";
                aim.style.filter = "Alpha(opacity="+opacity*100+")";
                if(fontSize > minnum){
                    setTimeout(step2,40);
                }else{
                    node.style.display = "none";
                }
            };
        };
    </script>
</body>
</html>

　　技術參考：http://www.zhangxinxu.comhtml

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。