PHP Code
|
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 |
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style type="text/css"> .loader-container { position: relative; 200px; height: 100px; border-radius: 8px; background-color: #fff; } .loader-container .loader { position: absolute; top: 50%; left: 50%; margin-top: -29px; margin-left: -24px; height: 17px; padding-top: 41px; text-align: center; color: #888; z-index: 1000; } .loader-container .loader::before,.loader-container .loader::after { position: absolute; content: ''; top: 0%; left: 50%; margin-left: -15.5px; 25px; height: 25px; border-radius: 100%; } .loader-container .loader::after { border- 3px; border-style: solid; border-color: #d9d9d9 #d9d9d9 #d9d9d9 transparent; -webkit-box-shadow: 0px 0px 0px 1px transparent; box-shadow: 0px 0px 0px 1px transparent; -webkit-animation: loader 0.8s linear; -webkit-animation-iteration-count: infinite; -webkit-animation: loader 0.8s linear; -moz-animation: loader 0.8s linear; animation: loader 0.8s linear; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } @keyframes loader { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); transform: rotate(360deg); } } </style> </head> <body> <a href="javascript:;" id="idd">测试</a> </body> </html> <script type="text/javascript" src="./css-js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(function(){ $('#idd').click(function(event) { var loadingCon = $('<div id="vv1" style="overflow:hidden;visibility:visible;position:absolute;z-index:1100;transition:opacity 300ms ease;-webkit-transition:opacity 300ms ease;opacity:1;top:'+(($(window).height()-100)/2)+'px;left:'+(($(window).width()-200)/2)+'px;"><div class="loader-container"><div class="loader center">处理中</div></div></div>'); var loadingBg = $('<div id="vv2" style="height:100%;position:fixed;top:0px;left:0px;right:0px;z-index:1000;opacity:1;transition:opacity 0.2s ease;-webkit-transition:opacity 0.2s ease;background-color:rgba(0,0,0,0.901961);"></div>'); $('html').css({'position':'relative','overflow':'hidden','height':$(window).height()+'px'}); $('body').css({'overflow':'hidden','height':$(window).height()+'px','padding':'0px'}).append(loadingCon).append(loadingBg); nowScroll = $(window).scrollTop(); console.log(nowScroll); }); }); function back(){ nowScroll = $(window).scrollTop(); $('html').css({'overflow':'visible','height':'auto','position':'static'}); $('body').css({'overflow':'visible','height':'auto','padding-bottom':'45px'}); $(window).scrollTop(nowScroll); $('#vv2').css('opacity',0); $('#vv1').remove(); $('#vv2').remove(); $('.motify_pass').hide(); } </script> |