标签：
appextend.js是自己编写的一个手机网页过渡时显示loading的一个js插件。
appextend.js :
var appExtend = function () { this.setHide = null; var $that = this; function hideDialogDiv() { $("#diag_bg_Box_x900AEB76").hide(); }; function addDialogDiv(obj) { var windowHeight = $(document).height(); if (obj != null) { windowHeight = $(obj).height(); } var html = "<div id=\"diag_bg_Box_x900AEB76\" class=\"diagBg\" style=‘height:" + windowHeight + "px; ‘><div id=\"diag_box_guid_x3F9AE\" class=\"diagContent\"><div id=‘dia_box_close_x3EB01F‘ onclick=\" $(‘#diag_bg_Box_x900AEB76‘).hide()\" style=\"border: 1px solid black;width: 19px;height: 15px;float: right;background:url(‘/Content/images/xx.png‘);position: relative;top: 18px;\"></div><div id=\"diag_content_box_x099065E3\" style=\"width:100%;height:100%;overflow:hidden;text-aline:center\"></div></div></div>"; if (obj != null) { $(obj).append(html); } else { $("body").append(html); } }; function MessageBoxShow(obj, message, opt, fn) { //try { if ($("#diag_bg_Box_x900AEB76") != null && $("#diag_bg_Box_x900AEB76").length > 0) { } else { addDialogDiv(obj); } $("#diag_bg_Box_x900AEB76").css({ "left": 0 }).show(); $("#diag_content_box_x099065E3").html(message); /*选项*/ if (opt != null) { /*透明度*/ //if (opt.opacity != null && Number(opt.opacity) > 0) { // $("#diag_bg_Box_x900AEB76").css({ opacity: Number(opt.opacity) / 100 }); //} else { // $("#diag_bg_Box_x900AEB76").css({ opacity: 0.3 }); //} /*关闭按钮*/ if (opt.close != null && !opt.close) { $("#dia_box_close_x3EB01F").hide(); } else { $("#dia_box_close_x3EB01F").show(); } /*高度*/ if (opt.height != null) { $("#diag_bg_Box_x900AEB76").css("height", opt.height); } else { var dh = obj != null ? $(obj).height() : $(document).height(); $("#diag_bg_Box_x900AEB76").css("height", opt.height); } /*边框*/ if (opt.border != null) { $("#diag_content_box_x099065E3").css("border", opt.border); } else { $("#diag_content_box_x099065E3").css("border", "none"); } if (opt.bgzindex != null) { $("#diag_bg_Box_x900AEB76").css("z-index", opt.bgzindex); } else { $("#diag_bg_Box_x900AEB76").css("z-index", "666"); } if (opt.scrolltop != null) { var top = $(window).scrollTop(); $("#diag_box_guid_x3F9AE").css("top", Number(top) + 100 + "px"); } else { $("#diag_box_guid_x3F9AE").css("top", "30%"); } if (opt.nobackimg != null) { $("#diag_bg_Box_x900AEB76").css("background", "none"); } else { $("#diag_bg_Box_x900AEB76").css("background", "url(../Content/images/pl_bg1.png) 0 0 repeat;"); } } $("#diag_box_guid_x3F9AE").slideDown("fast"); if (fn != null && typeof fn === "function") { fn(); } //} catch (e) { // console.log(e.message); //} }; /****propertys*****/ this.isHide = $("#diag_bg_Box_x900AEB76").is(‘:hidden‘); //show loading background and image this.showLoading = function (opt, loadthem, clearnHide) { if (clearnHide) { clearTimeout($that.setHide); } var _h = $(window).height(); opt = opt || {}; opt.close = false; var loadstr = ""; switch (loadthem) { case ‘a‘: loadstr = ‘<img style="margin-top:‘ + _h * 0.2 + ‘px" src="/Content/images/ajax-loader.gif" />‘; break; case ‘b‘: loadstr = ‘<div class="loader"></div>‘; break; case ‘c‘: loadstr = ‘<div class="loader6"></div>‘; break; case ‘d‘: loadstr = ‘<div class="loader8"></div>‘; break; default: loadstr = ‘<img style="margin-top:‘ + _h * 0.2 + ‘px" src="/Content/images/ajax-loader.gif" />‘; } MessageBoxShow(null, loadstr, opt); }; //hide loading background and image this.loadingHide = function (t) { t = t || "hide"; switch (t) { case "hide": $("#diag_bg_Box_x900AEB76").hide(); break; case "slide": $("#diag_bg_Box_x900AEB76").animate({ left: 0 - $(window).width() }, 1000, function () { $("#diag_bg_Box_x900AEB76").hide(); }); break; case "slideUp": $("#diag_bg_Box_x900AEB76").slideUp(); break; default: $("#diag_bg_Box_x900AEB76").hide(); } }; this.transfer = function () { var _h = $(window).height(); $("a[href*=‘/‘]").bind("click", function () { // addDialogDiv({}); MessageBoxShow(null, ‘<img style="margin-top:‘ + _h * 0.2 + ‘px" src="/Content/images/ajax-loader.gif" />‘, { close: false }); }); }; } var _app = new appExtend(); _app.showLoading(); $(function () { _app.transfer(); _app.setHide = setTimeout(function () { _app.loadingHide("slide"); }, 300); });
css:
/****************遮罩样式****************/ .diagBg { text-align: center; position: absolute; left: 0pt; top: 0pt; width: 100%; z-index: 666; /*-moz-opacity: 0.3; opacity: .30; filter: alpha(opacity = 30);*/ background: url(../Content/images/pl_bg1.png) 0 0 repeat; } .diagContent { position: absolute; left: 10%; top: 30%; width: 80%; height: 60%; z-index: 999; text-align: center; } /**************laod***********/ .loader, .loader:before, .loader:after { border-radius: 50%; } .loader:before, .loader:after { position: absolute; content: ‘‘; } .loader:before { width: 2.6em; height: 5.2em; background: #FFFFFF; border-radius: 10.2em 0 0 10.2em; top: -0.1em; left: -0.1em; -webkit-transform-origin: 2.6em 2.6em; transform-origin: 2.6em 2.6em; -webkit-animation: load2 2s infinite ease 1.5s; animation: load2 2s infinite ease 1.5s; } .loader { font-size: 11px; text-indent: -99999em; margin: 30% auto; position: relative; width: 5em; height: 5em; box-shadow: inset 0 0 0 1em #999; } .loader:after { width: 2.6em; height: 5.2em; background: #FFFFFF; border-radius: 0 3.2em 3.2em 0; top: -0.1em; left: 2.5em; -webkit-transform-origin: 0px 2.6em; transform-origin: 0px 2.6em; -webkit-animation: load2 2s infinite ease; animation: load2 2s infinite ease; } @-webkit-keyframes load2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .loader6 { font-size: 45px; text-indent: -9999em; overflow: hidden; width: 1em; height: 1em; border-radius: 50%; margin: 33% auto; position: relative; -webkit-animation: load6 1.7s infinite ease; animation: load6 1.7s infinite ease; } @-webkit-keyframes load6 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); box-shadow: -0.11em -0.83em 0 -0.4em #999, -0.11em -0.83em 0 -0.42em #999, -0.11em -0.83em 0 -0.44em #999, -0.11em -0.83em 0 -0.46em #999, -0.11em -0.83em 0 -0.477em #999; } 5%, 95% { box-shadow: -0.11em -0.83em 0 -0.4em #999, -0.11em -0.83em 0 -0.42em #999, -0.11em -0.83em 0 -0.44em #999, -0.11em -0.83em 0 -0.46em #999, -0.11em -0.83em 0 -0.477em #999; } 30% { box-shadow: -0.11em -0.83em 0 -0.4em #999, -0.51em -0.66em 0 -0.42em #999, -0.75em -0.36em 0 -0.44em #999, -0.83em -0.03em 0 -0.46em #999, -0.81em 0.21em 0 -0.477em #999; } 55% { box-shadow: -0.11em -0.83em 0 -0.4em #999, -0.29em -0.78em 0 -0.42em #999, -0.43em -0.72em 0 -0.44em #999, -0.52em -0.65em 0 -0.46em #999, -0.57em -0.61em 0 -0.477em #999; } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); box-shadow: -0.11em -0.83em 0 -0.4em #999, -0.11em -0.83em 0 -0.42em #999, -0.11em -0.83em 0 -0.44em #999, -0.11em -0.83em 0 -0.46em #999, -0.11em -0.83em 0 -0.477em #999; } } @keyframes load6 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff; } 5%, 95% { box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff; } 30% { box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.51em -0.66em 0 -0.42em #ffffff, -0.75em -0.36em 0 -0.44em #ffffff, -0.83em -0.03em 0 -0.46em #ffffff, -0.81em 0.21em 0 -0.477em #ffffff; } 55% { box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.29em -0.78em 0 -0.42em #ffffff, -0.43em -0.72em 0 -0.44em #ffffff, -0.52em -0.65em 0 -0.46em #ffffff, -0.57em -0.61em 0 -0.477em #ffffff; } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff; } } .loader8 { margin: 6em auto; font-size: 10px; position: relative; text-indent: -9999em; border-top: 1.1em solid rgba(255, 255, 255, 0.3); border-right: 1.1em solid rgba(255, 255, 255, 0.3); border-bottom: 1.1em solid rgba(255, 255, 255, 0.3); border-left: 1.1em solid #ffffff; -webkit-animation: load8 1.1s infinite linear; animation: load8 1.1s infinite linear; } .loader8, .loader8:after { border-radius: 50%; width: 2.5em; height: 2.5em; } @-webkit-keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
实际应用1：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="format-detection=no,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,width=device-width" /> @Styles.Render("~/Content/public") <script src="~/Scripts/lib/jquery-1.8.2.min.js"></script> </head> <body style="background:#F0F0F0;"> @Scripts.Render("~/bundles/appextend") .......................
应用2：
在页面加载后加载数据效果：
js：
/// <reference path="../AppExtends.js" /> /// <reference path="base.js" /> /// <reference path="../lib/underscore.js" /> /// <reference path="../lib/iscroll.js" /> var shopcar = new basejs(); shopcar.ready = function (s) { var model = shopcar.model; _app.showLoading({ nobackimg: true }, ‘d‘, true); this.base.calcSize(); ......
标签：
原文地址：http://www.cnblogs.com/aser1989/p/4226435.html
