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();

......

appExtend.js的更多相关文章

  1. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  2. js学习笔记：操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  3. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  4. JS调用Android、Ios原生控件

    在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...

  5. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  6. 利用snowfall.jquery.js实现爱心满屏飞

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

  7. node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  8. JS正则表达式常用总结

    正则表达式的创建 JS正则表达式的创建有两种方式: new RegExp() 和 直接字面量. //使用RegExp对象创建 var regObj = new RegExp("(^\\s+) ...

  9. 干货分享：让你分分钟学会 JS 闭包

    闭包,是 Javascript 比较重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述 ...

  10. JS核心系列：理解 new 的运行机制

    和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过 ...

随机推荐

  1. P5524 Ynoi2012 NOIP2015 充满了希望

    P5524 Ynoi2012 NOIP2015 充满了希望 数组开大见祖宗. 思路 不难发现只有询问才会产生贡献,而询问的值来自于距离它最近的且能覆盖这个询问的点的覆盖操作. 可以每个询问操作保存一个 ...

  2. markdown小小白常用语法

    第一次用vscode写笔记去同步Cnblog,不知道写啥就记点常用的md语法吧 1. 标题怎么写? 利用"#" + " " 即可实现第几节标题(其中'/',表转 ...

  3. .NET使用Umbraco CMS快速构建一个属于自己的内容管理系统

    前言 今天大姚给大家分享一个.NET开源.免费(MIT License).功能强大.灵活易用的内容管理系统:Umbraco CMS.本文将介绍在.NET中如何使用Umbraco CMS快速构建一个属于 ...

  4. [昌哥IT课堂]｜ubuntu18.04手动安装mysql8.0.33 deb包

    前期准备 1.更新aliyun的软件包安装源: 手动更改 用你熟悉的编辑器打开: /etc/apt/sources.list 把源来链接删除或注释: 加入以下命令: ubuntu 18.04 LTS ...

  5. Mac 上常见的环境配置文件

    当使用命令行终端进行开发时,环境配置文件可以用来自动化执行一些命令或设置环境变量,以提高工作效率和方便使用.在 Mac 上,常见的环境配置文件有以下几种: 1. 在.bash_profile文件中配置 ...

  6. Vim之PHP语法检查

    在Linux下操作,一般都是使用vim进行文本编辑, 这个时候有可能不小心就会出现语法异常,导致程序错误 手动检查: 1) 编辑完成之后, 回到命令行下执行 php -l test.php 如果语法校 ...

  7. Spring Data JPA自动生成表时列顺序混乱的解决办法（最新版）

    最近把Spring Boot的版本升级到了3.3.5,突然发现一个问题:当使用Spring Data JPA自动生成表的时候,所产生的列顺序与Entity类中的变量顺序不一致了.比如,有一个下面这样的 ...

  8. PYENV安装与使用

    1.概述 pyenv 是一个python的版本管理软件,通过他,我们可以 方便的安装python 的版本,切换版本,解决版本不同带来问题. 2.安装pyenv 我们可以通过链接下载pyenv http ...

  9. JavaScript 样式操作

    1.类名操作 class类名以字符串的形式存储到标签和Dom元素的属性中,标签属性为class,Dom元素属性为className,两个属性是均支持读取和修改,修改其中的一个会同步至另一个属性 cla ...

  10. Winform窗体控件双向绑定数据模拟读写PLC数据

    1.用Modbus工具模拟PLC 2.创建一个实体类 点击查看代码 internal class Data : INotifyPropertyChanged { ushort[] ushorts = ...