自定义遮罩和加载中动画

自定义遮罩和加载中动画
图片也可以使用GIF。

JS部分

    //开启遮罩
    openMask : function() {
        //console.log("openMask");
        var div = document.createElement("div");
        div.id = "myMask";
        document.getElementsByTagName("body")[0].appendChild(div);
        var $mask = $("#myMask");
        $mask.css("position", "fixed");
        $mask.css("top", "0");
        $mask.css("right", "0");
        $mask.css("bottom", "0");
        $mask.css("left", "0");
        $mask.css("z-index", "1000");
        $mask.css("background-color", "rgba(0,0,0,0.3)");
        $mask.hasClass("glass");
        var $mask = $("#myMask");
        $mask.show();
        $mask.bind( "touchmove", function (e) {
            e.preventDefault();
            if(isIos()){
                window.event.returnValue = false; 
            }
        });
    },
    //关闭遮罩
    closeMask : function() {
        //console.log("closeMask");
        var $mask = $("#myMask");
        $mask.hide();
    },
    //loading加载中遮罩
    loading : function(myMask, loading) {
        //console.log("loading");
        myCommon.openMask();
        var img = document.createElement("img");
        img.id = "loading";
        img.alt = "加载中";
        img.src = "../../img/picVideo/pull_fresh.png";
        var $mask = $("#myMask");
        $mask.append(img).css("z-index", "1000");
        var $child = $("#loading");
        $child.css("position", "absolute").css("z-index", "1001").css("margin-top", "0");
        var dWidth = myCommon.wWidth;
        var dHeight = myCommon.wHeight;
        var iWidth = $child.width();
        var iHeight = $child.height();
        var diffW = (dWidth - iWidth) / 2;
        var diffH = (dHeight - iHeight) / 2 - iHeight;
        $child.css("top", diffH).css("left", diffW);
    },
    //关闭加载中遮罩
    closeLoading : function() {
        //console.log("closeLoading");
        var $mask = $("#myMask");
        $mask.remove();
    }

CSS部分

    /*加载中————开始*/
    #loading {
        width: 50px;
        height: 50px;
        animation: rotation 1s linear 0s infinite;
        /* Firefox: */
        -moz-animation: rotation 1s linear 0s infinite;
        /* Safari and Chrome: */
        -webkit-animation: rotation 1s linear 0s infinite;
        /* Opera: */
        -o-animation: rotation 1s linear 0s infinite;
    }
    @keyframes rotation {
        0%   {
            transform: rotate(0deg);
            -ms-transform: rotate(0deg);        /* IE 9 */
            -webkit-transform: rotate(0deg);    /* Safari and Chrome */
            -o-transform: rotate(0deg);     /* Opera */
            -moz-transform: rotate(0deg);       /* Firefox */
        }
        100% {
            transform: rotate(3600deg);
            -ms-transform: rotate(360deg);      /* IE 9 */
            -webkit-transform: rotate(360deg);  /* Safari and Chrome */
            -o-transform: rotate(360deg);       /* Opera */
            -moz-transform: rotate(360deg);     /* Firefox */
        }
    }
    /*加载中————结束*/

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 165,920评论 24 701
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 9,585评论 4 52
  • 08年的时候高中毕业,对于一个差级生来说400多分的成绩,确实也让父亲寒了心。至今还记得当初电话那头报出我的总...
    任理想阅读 180评论 0 0
  • 早晨起来熬粥,成了最近一段时间的小习惯。喜欢“洗手做羹汤”的从容雅致的感觉。锅里加水的时候已经放了一小勺糯米...
    微荷阅读 101评论 1 1
  • “……面对闪光的钞票,多少人儿去动脑,有人为你愁眉苦脸,有人为你哈哈笑。东奔又西跑,点头又哈腰,钞票,你的威...
    金永辉煌阅读 1,110评论 37 11