Jquery页面加载效果
生活随笔
收集整理的這篇文章主要介紹了
Jquery页面加载效果
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
?
1、說(shuō)明
Jquery頁(yè)面加載可實(shí)現(xiàn)異步請(qǐng)求時(shí)提示“請(qǐng)稍后，正在加載...”效果，同步請(qǐng)求不可用（即ajax?async: false）。本文地址：http://www.cnblogs.com/lengzhan/p/6423312.html
2、代碼
| 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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | <!DOCTYPE html PUBLIC?"-//W3C//DTD XHTML 1.0 Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ????<meta http-equiv="Content-Type"?content="text/html; charset=utf-8"?/> ????<title>jquery頁(yè)面加載特效</title> ????<style type="text/css"> ????????* ????????{ ????????????margin: 0; ????????????padding: 0; ????????????list-style-type: none; ????????} ????????a, img ????????{ ????????????border: 0; ????????} ????????.loading ????????{ ????????????margin: 100px auto 0 auto; ????????????width: 400px; ????????????text-align: center; ????????????font-size: 18px; ????????} ????????.loading .action ????????{ ????????????text-decoration: none; ????????????font-family:?"微軟雅黑"?,?"宋體"; ????????} ????????? ????????.cover ????????{ ????????????position:?fixed; ????????????top: 0; ????????????right: 0; ????????????bottom: 0; ????????????left: 0; ????????????z-index: 998; ????????????width: 100%; ????????????height: 100%; ????????????_padding: 0 20px 0 0; ????????????background: #f6f4f5; ????????????display: none; ????????} ????????.showLoad ????????{ ????????????position:?fixed; ????????????top: 0; ????????????left: 50%; ????????????z-index: 9999; ????????????opacity: 0; ????????????filter: alpha(opacity=0); ????????????margin-left: -80px; ????????} ????????*html, *html body ????????{ ????????????background-image: url(about:blank); ????????????background-attachment:?fixed; ????????} ????????*html .showLoad, *html .cover ????????{ ????????????position: absolute; ????????????top: expression(eval(document.documentElement.scrollTop)); ????????} ????????#ajaxLoad ????????{ ????????????border: 1px solid #8CBEDA; ????????????font-size: 12px; ????????????font-weight: bold; ????????} ????????#ajaxLoad div.loadAll ????????{ ????????????width: 180px; ????????????height: 50px; ????????????line-height: 50px; ????????????border: 2px solid #D6E7F2; ????????????background: #fff; ????????} ????????#ajaxLoad img ????????{ ????????????margin: 10px 15px; ????????????float: left; ????????????display: inline; ????????} ????</style> ????<script type="text/javascript"?src="js/jquery.min.js"></script> ????<script type="text/javascript"> ????????$(function () { ????????????var?hei = $(document).height(); ????????????$(".cover").css({?"height": hei }); ????????????$(".action").click(function () { ????????????????startWaiting(); ????????????????setTimeout(function () { ????????????????????endWaiting(); ????????????????}, 3000); ????????????}); ????????}); ????????//開(kāi)始加載 ????????function startWaiting() { ????????????$(".cover").css({?'display':?'block',?'opacity':?'0.8'?}); ????????????$(".showLoad").stop(true).animate({?'margin-top':?'300px',?'opacity':?'1'?}, 200); ????????} ????????//結(jié)束加載 ????????function endWaiting() { ????????????$(".showLoad").stop(true).animate({?'margin-top':?'250px',?'opacity':?'0'?}, 400); ????????????$(".cover").css({?'display':?'none',?'opacity':?'0'?}); ????????} ????</script> </head> <body> ????<div?class="loading"> ????????<a?class="action"?href="javascript:void(0);">點(diǎn)擊加載特效</a></div> ????<div?class="cover"> ????</div> ????<div id="ajaxLoad"?class="showLoad"> ????????<div?class="loadAll"> ????????????<img src="image/waiting.gif">加載中，請(qǐng)稍候...</div> ????</div> </body> </html> |
3、DEMO
點(diǎn)擊下載
?
轉(zhuǎn)轉(zhuǎn)載于:https://www.cnblogs.com/alinaxia/p/6426313.html
總結(jié)
以上是生活随笔為你收集整理的Jquery页面加载效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 点击双人同行游戏出现failedtoin
- 下一篇： [译文]c#扩展方法(Extension