html5 自定義遮罩

ys_loading.css

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

<code>.ys-loading{</code>

<code>    </code><code>position</code><code>:</code><code>fixed</code><code>;</code>

<code>    </code><code>top</code><code>:</code><code>0</code><code>;</code>

<code>    </code><code>bottom</code><code>:</code><code>0</code><code>;</code>

<code>    </code><code>left</code><code>:</code><code>0</code><code>;</code>

<code>    </code><code>right</code><code>:</code><code>0</code><code>;</code>

<code>    </code><code>z-index</code><code>: </code><code>9999</code><code>;</code>

<code>}</code>

<code>.ys-loading em{</code>

<code>    </code><code>position</code><code>:</code><code>absolute</code><code>;</code>

<code>    </code><code>width</code><code>:</code><code>44px</code><code>;</code>

<code>    </code><code>height</code><code>:</code><code>44px</code><code>;</code>

<code>    </code><code>margin</code><code>:</code><code>auto</code><code>;</code>

<code>    </code><code>border-radius: </code><code>22px</code><code>;</code>

<code>    </code><code>opacity: </code><code>0.3</code><code>;</code>

<code>    </code><code>overflow</code><code>: </code><code>hidden</code><code>;</code>

<code>.ys-loading em:before{</code>

<code>    </code><code>content</code><code>:</code><code>""</code><code>;</code>

<code>    </code><code>display</code><code>:</code><code>block</code><code>;</code>

<code>    </code><code>width</code><code>:</code><code>46px</code><code>;</code>

<code>    </code><code>height</code><code>:</code><code>46px</code><code>;</code>

<code>    </code><code>background</code><code>:</code><code>url</code><code>(../../images/common/ajax-loader.gif) </code><code>no-repeat</code> <code>center</code> <code>center</code><code>;</code>

<code>    </code><code>background-</code><code>size</code><code>:contain;</code>

<code>    </code><code>margin-top</code><code>:</code><code>-1px</code><code>;</code>

<code>    </code><code>margin-left</code><code>:</code><code>-1px</code><code>;</code>

ys_loading.js

<code>(</code><code>function</code><code>($){</code>

<code>    </code><code>var</code> <code>container = </code><code>null</code><code>;</code>

<code>    </code><code>var</code> <code>html =  </code><code>"&lt;div class='ys-loading'&gt;&lt;em&gt;&lt;/em&gt;&lt;/div&gt;"</code><code>;</code>

<code>    </code><code>function</code> <code>render(){</code>

<code>        </code><code>container = $(html).appendTo(</code><code>"body"</code><code>);</code>

<code>    </code><code>}</code>

<code>    </code><code>var</code> <code>initialized = </code><code>false</code><code>;</code>

<code>    </code><code>function</code> <code>init(){</code>

<code>        </code><code>if</code><code>(initialized){</code>

<code>            </code><code>return</code><code>;</code>

<code>        </code><code>}</code>

<code>        </code><code>initialized = </code><code>true</code><code>;</code>

<code>        </code><code>render();</code>

<code>    </code><code>var</code> <code>LoadingWidget = {</code>

<code>        </code><code>showLoading:</code><code>function</code><code>(){</code>

<code>            </code><code>init();</code>

<code>            </code><code>container.show();</code>

<code>        </code><code>},</code>

<code>        </code><code>hideLoading:</code><code>function</code><code>(){</code>

<code>            </code><code>container.hide();</code>

<code>    </code><code>};</code>

<code>    </code><code>window.LoadingWidget = LoadingWidget;</code>

<code>})(jQuery);</code>

<a href="http://s1.51cto.com/wyfs02/M01/88/FC/wKioL1gEYCyykQZqAAhmZCqjM2U111.jpg" target="_blank"></a>

<a href="http://down.51cto.com/data/2368264" target="_blank">附件：http://down.51cto.com/data/2368264</a>

 本文轉自 antlove 51CTO部落格，原文連結:http://blog.51cto.com/antlove/1862623