欢迎进入广州凡科互联网科技有限公司网站
全国服务热线
4000-399-000
小程序开发者工具_jquery完成页面加载效果
时间: 2021-01-12 13:52 浏览次数:
jquery完成网页页面载入实际效果 文中关键详细介绍了jquery完成网页页面载入实际效果的案例,具备非常好的参照使用价值,下边跟随网编一起來看看吧1、表明Jquery网页页面载入可
jquery实现页面加载效果       本文主要介绍了jquery实现页面加载效果的实例,具有很好的参考价值,下面跟着小编一起来看下吧

1、说明

Jquery页面加载可实现异步请求时提示“请稍后,正在加载...”效果,同步请求不可用(即ajax async: false)。

2、代码

 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "TR/xhtml1/DTD/xhtml1-transitional.dtd" 
 html xmlns="1999/xhtml" 
 head 
 meta http-equiv="Content-Type" content="text/html; charset=utf-8" / 
 title jquery页面加载特效 /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);
 //开始加载
 function startWaiting() {
 $(".cover").css({ 'display': 'block', 'opacity': '0.8' });
 $(".showLoad").stop(true).animate({ 'margin-top': '300px', 'opacity': '1' }, 200);
 //结束加载
 function endWaiting() {
 $(".showLoad").stop(true).animate({ 'margin-top': '250px', 'opacity': '0' }, 400);
 $(".cover").css({ 'display': 'none', 'opacity': '0' });
 /script 
 /head 
 body 
 div 
 a href="javascript:void(0);" rel="external nofollow" 点击加载特效 /a /div 
 div 
 /div 
 div id="ajaxLoad" 
 div 
 img src="image/waiting.gif" 加载中,请稍候... /div 
 /div 
 /body 
 /html 

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持凡科!

下一篇:没有了


Copyright © 广州凡科互联网科技有限公司 版权所有 粤ICP备10235580号
全国服务电话:4000-399-000   传真:021-45545458
公司地址:广州市海珠区工业大道北67号凤凰创意园