首頁  >  文章  >  web前端  >  JS Loading功能的簡單實作_javascript技巧

JS Loading功能的簡單實作_javascript技巧

WBOY
WBOY原創
2016-05-16 17:11:46861瀏覽

我們常在瀏覽網頁的時候會看到資料在載入時,出現的LOADING提示。其實這個功能原理是很簡單的,就是一個DIV遮蓋當前頁面,然後Loading就在遮蓋DIV層上展示出來,現在我們來動手實現一下。

1.目前頁數:

複製程式碼 代碼如下:


2.遮罩層:

複製程式碼 程式碼如下:

程式碼如下:


整體代碼:
複製代碼
複製代碼
複製代碼

程式碼如下:
                .current      }
        .over {
            display: none;
       top: 0;
            left: 0;
           
            background-color: #f5f5f5;
            opacity         }

        .layout {            display: none;

       top: 40%;
            left: 40%;
           %;
            z-index: 1001;
             

   


   

   





最終效果:

在網路上還看到另一種實現方式,感覺思路不錯,就是利用JS不斷的改變html標籤的value值,達到加載提示的效果,根據他的思路我自己實現了下,代碼如下:

複製程式碼 程式碼如下: