加載動畫插件spin.js的使用隨筆

本文轉載自查看原文 2017-05-15 15:20 5895 web前端—組件與插件

背景：

在請求后台的“漫長”等待過程中，為了提升用戶體驗，需要一個類似的加載動畫效果，讓用戶明確現在處於請求過程中，而不是機子down掉或者網站死了

靜態demo（未與后台交互）：

HTML代碼如下

<!doctype html>
<html>
    <head>
        <title>Test Spin Demo</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script type="text/javascript" src="http://spin.js.org/spin.min.js" ></script>
        <style>
            #Div{
                width: 100%;
                height: 100%;
                text-align:center;
            }
            
            #firstDiv{
                width: 100%;
                height: 50%;
            }
            
            #secondDiv{
                width: 50%;
                height: 50%;
                margin:0 auto;
            }
        </style>
        <script type="text/javascript">        
            //opts 樣式可從網站在線制作
            var opts = {            
                lines: 13, // 花瓣數目
                length: 20, // 花瓣長度
                width: 10, // 花瓣寬度
                radius: 30, // 花瓣距中心半徑
                corners: 1, // 花瓣圓滑度 (0-1)
                rotate: 0, // 花瓣旋轉角度
                direction: 1, // 花瓣旋轉方向 1: 順時針, -1: 逆時針
                color: '#000', // 花瓣顏色
                speed: 1, // 花瓣旋轉速度
                trail: 60, // 花瓣旋轉時的拖影(百分比)
                shadow: false, // 花瓣是否顯示陰影
                hwaccel: false, //spinner 是否啟用硬件加速及高速旋轉            
                className: 'spinner', // spinner css 樣式名稱
                zIndex: 2e9, // spinner的z軸 (默認是2000000000)
                top: '25%', // spinner 相對父容器Top定位 單位 px
                left: '50%'// spinner 相對父容器Left定位 單位 px
            };

            var spinner = new Spinner(opts);

            $(document).ready(function () {
                $("#btnRequest").bind("click", function () {
                    Request();
                });
                $("#btnRequest2").bind("click", function () {
                   Request2();
                });
            })
            
            function Request(){
                //請求時spinner出現
                var target = $("#firstDiv").get(0);
                spinner.spin(target);
            }
            
            function Request2(){
                //關閉spinner  
                spinner.spin();
            }
        </script>
    </head>
    <body>
        <div id="Div">
            <div id="firstDiv">
            </div>
            <div id="secondDiv">
                <input id="btnRequest" type="button" value="顯示加載" class="btnStyle" />
                <input id="btnRequest2" type="button" value="隱藏加載" class="btnStyle" />
            </div>
        </div>
    </body>
</html>

提示：

一、其中opts樣式可在http://spin.js.org/在線制作與測試

var opts = {            
                lines: 13, // 花瓣數目
                length: 20, // 花瓣長度
                width: 10, // 花瓣寬度
                radius: 30, // 花瓣距中心半徑
                corners: 1, // 花瓣圓滑度 (0-1)
                rotate: 0, // 花瓣旋轉角度
                direction: 1, // 花瓣旋轉方向 1: 順時針, -1: 逆時針
                color: '#000', // 花瓣顏色
                speed: 1, // 花瓣旋轉速度
                trail: 60, // 花瓣旋轉時的拖影(百分比)
                shadow: false, // 花瓣是否顯示陰影
                hwaccel: false, //spinner 是否啟用硬件加速及高速旋轉            
                className: 'spinner', // spinner css 樣式名稱
                zIndex: 2e9, // spinner的z軸 (默認是2000000000)
                top: '25%', // spinner 相對父容器Top定位 單位 px
                left: '50%'// spinner 相對父容器Left定位 單位 px
            };

二、spin.js+自制遮罩（暫時還沒有找到插件本身自帶的遮罩層）

背景：想要在顯示加載狀態時，父層為不可編輯狀態

在頁面最后、</body>之前添加div遮罩層

<div id="mb"></div>

設置遮罩層的樣式

#mb{
    display: none;
    height: 100%;
    width: 100%;
    position: fixed;
    *position: absolute;
    *height: 1380px;
    background: black;
    top:0;
    left: 0;
    opacity:0.6;
}

最后通過js控制遮罩的顯示與隱藏

//顯示
$("#mb").css("display","block");
var target = $(".firstDiv").get(0);
spinner.spin(target);

//隱藏
$("#mb").css("display","none");
spinner.spin();

效果如下，此時父層為不可編輯狀態：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 spin.js js spin 加載動畫（loading）插件：加載動畫動畫插件wow.js的使用方法 MFC中Spin control的使用 loading加載動畫效果js實現 CSS3，JS可用於刷新按鈕或者加載動畫的動畫 jquery使用CSS3實現文字動畫效果插件Textillate.js CSharpGL(50)使用Assimp加載骨骼動畫 swift 使用Lottie加載json動畫步驟