zoukankan      html  css  js  c++  java
  • js库

    var method={
        msg_layer:function(obj){
            //弹框
            $(".msg-layer-bg,.msg-layer").remove();
           $("body").append( '<div class="msg-layer-bg"></div><div class="msg-layer showAlert"><h5></h5><div class="msg-con"></div><div class="layer-close">&times;</div><div class="layer-btn"><input type="button" class="layer-cancel"/><input type="button" class="layer-commit"/></div></div>');
            var _layerBg=$(".msg-layer-bg"),_layer=$(".msg-layer"),_close=$(".layer-close"),_cansel=$(".layer-cancel"),_commit=$(".layer-commit");
            _layer.attr("data-animation",obj.type);
            var winH=$(window).height(),winW=$(window).width();
            if(obj.title){
                _layer.find("h5").html(obj.title);
            }else{
                _layer.find("h5").css("display","none")
            }
            if(obj.content){
                _layer.find($(".msg-con")).html(obj.content);
            }else if(obj.url){
                $.get(obj.url,function(data){
                    _layer.find($(".msg-con")).html(data);
                });
            }
            _layer.css({"display":"block"});
            _layerBg.css({"display":"block"});
            if(!obj.close  || obj.close == "true"){
                //关闭按钮
                _close.css("display","block");
                _close.on("click",function(){
                    method.msg_close();
                })
            }else{
                _close.css("display","none");
            }
            if(obj.btn){
                //按钮
                if(obj.btn[0] != ""){
                    _cansel.css("display","inline-block");
                    _cansel.val(obj.btn[0]);
                    _cansel.on("click",function(){
                        if(obj.callBack1){
                            obj.callBack1();
                            method.msg_close();
                        }else{
                            method.msg_close();
                        }
                    })
    
                }
                if(obj.btn[1] != ""){
                    _commit.css("display","inline-block");
                    _commit.val(obj.btn[1]);
                    _commit.on("click",function(){
                        if(obj.callBack2){
                            obj.callBack2();
                        }
                    })
                }
            }
            if(obj.area){
                //宽高
                if(obj.area[0] != "auto" && obj.area[1] != "auto"){
                    _layer.css({"width":obj.area[0],"height":obj.area[1],"left":winW/2-parseFloat(obj.area[0])/2,"top":winH/2-parseFloat(obj.area[1])/2});
                }else if(obj.area[0] != "auto" && obj.area[1] === "auto"){
                    _layer.css({"width":obj.area[0],"height":obj.area[1],"left":winW/2-parseFloat(obj.area[0])/2,"top":winH/2-(_layer.height()+20)/2});
                }else if(obj.area[0] === "auto" && obj.area[1] != "auto"){
                    _layer.css({"width":_layer.width()+20,"height":obj.area[1],"left":winW/2-(_layer.width()+20)/2,"top":winH/2-parseFloat(obj.area[1])/2});
                }
    
            }else{
                _layer.css({_layer.width()+20+"px","margin":"-"+((_layer.height()+10)/2)+"px 0 0 -"+((_layer.width()+20)/2)+"px"});
            }
        },
        msg_close:function(){
            //关闭弹框
            var timer=null;
            $(".msg-layer").removeClass('showAlert').addClass("hideAlert");
            timer=setTimeout(function(){
                clearTimeout(timer);
                $(".msg-layer-bg").remove();
                $(".msg-layer").remove();
            },200);
        },
        msg_fade:function(obj){
            //弹出信息框,显示几秒后自动消失
            //ele表示需要显示的元素,time表示时间,msg表示弹框中的内容
            if($(".msy-alert").length>0){
                $(".msy-alert").remove();
            }
            $("body").append('<div class="msy-alert showAlert" data-animation="layerFadeIn">'+obj.content+'</div>');
            var msg_timer=null,$msg=$(".msy-alert");
            var winH=$(window).height(),winW=$(window).width();
            if(obj.area){
                if(obj.area[0] != "auto" && obj.area[1] != "auto"){
                    $msg.css({"width":obj.area[0],"height":obj.area[1],"left":winW/2-parseFloat(obj.area[0])/2,"top":winH/2-parseFloat(obj.area[1])/2});
                }else if(obj.area[0] != "auto" && obj.area[1] === "auto"){
                    $msg.css({"width":obj.area[0],"height":obj.area[1],"left":winW/2-parseFloat(obj.area[0])/2,"top":winH/2-($msg.height())/2});
                }else if(obj.area[0] === "auto" && obj.area[1] != "auto"){
                    $msg.css({"width":$msg.width()+20,"height":obj.area[1],"left":winW/2-($msg.width())/2,"top":winH/2-parseFloat(obj.area[1])/2});
                }
    
            }else{
                $msg.css({$msg.width()+20+"px","margin":"-"+(($msg.height()+10)/2)+"px 0 0 -"+(($msg.width()+20)/2)+"px"});
            }
            if(obj.line){
                $msg.css("line-height",obj.line)
            }
            msg_timer=window.setTimeout(function(){
                msg_timer=null;
                clearTimeout(msg_timer);
                $(".msy-alert").removeClass('showAlert').addClass("hideAlert").remove();
            },obj.time)
        },
        getRandom:function(n,m){
            //获取随机数
            n=Number(n);
            m=Number(m);
            if(isNaN(n)||isNaN(m)){
                return Math.random();
            }
            if(n>m){
                var t=n;
                n=m;
                m=t;
            }
            return Math.round(Math.random()*(m-n)+n);
        },
        hasClass: function () {
            //原生js判断是否有某个class 相当于jq的hasClass()
            var cName = arguments[0], ele = arguments[1], reg = new RegExp("(?:^| +)" + cName + "(?: +|$)", "g");
            return reg.test(ele.className);
        },
        addClass: function () {
            //原生js新增class 相当于jq的addClass()
            var cName = arguments[0], ele = arguments[1];
            if (!this.hasClass(cName, ele)) {
                ele.className += " " + cName;
            }
        },
        removeClass: function () {
            //原生js移除class相当于jq中的removeClass()
            var cName = arguments[0], ele = arguments[1], reg = new RegExp("(?:^| +)" + cName + "(?: +|$)", "g");
            if (this.hasClass(cName, ele)) {
                ele.className = ele.className.replace(reg, "");
            }
        },
        byClass:function (cName,context){
            //通过className获取
            context=context||document;
            if(context.getElementsByClassName){
                return context.getElementsByClassName(cName);
            }
            var ary=[];
            var allTag=context.getElementsByTagName("*");
            for(var i=0;i<allTag.length;i++){
                var cur=allTag.item(i);
                if(cur.className.indexOf(cName)>-1){
                    ary.push(cur);
                }
            }
            return ary;
        },
        setOpacity:function(ele,level){
            //原生js设置透明度
            if(ele.filters){
                ele.style.filter = "alpha(opacity="+level+")";
            }else{
                ele.style.opacity = level / 100;
            }
        },
        fadeIn:function(ele){
            //原生js模仿jq fadeIn()效果
            method.setOpacity(ele,0);
            for(var i = 0;i<=20;i++){
                (function(){
                    var timer1=null;
                    clearTimeout(timer1);
                    var level = i * 5;
                    timer1=setTimeout(function(){
                        method.setOpacity(ele, level)
                    },i*25);
                })(i);
            }
        },
        fadeOut:function(ele){
            //原生js模仿jq实现fadeOut()效果
            for(var i = 0;i<=20;i++){
                (function(){
                    var timer2=null;
                    clearTimeout(timer2);
                    var level = 100 - i * 5;
                    timer2=setTimeout(function(){
                        method.setOpacity(ele, level)
                    },i*25);
                })(i);
            }
    
        },
        //选项卡
        tab:function(a,b,className){
            //a表示点击的按钮 一般传$(this)
            //b表示内容项   className表示active选项
            var index=a.index();
            a.addClass(className);
            a.siblings().removeClass(className);
            b.eq(index).addClass(className);
            b.eq(index).siblings().removeClass(className);
        },
        //当scrollTop大于100的时候,显示回到顶部按钮
        topBtn:function(a,time){
            if($(window).scrollTop()>100){
                a.fadeIn(time);
            }else{
                a.fadeOut(time);
            }
        },
        //回到顶部
        toTop:function(time){
            $("html,body").animate({scrollTop:0},time);
            return false;
        },
        //全选--全选按钮
        checkAll:function(a,b){
            //a表示除全选按钮以外的所有复选框
            //b表示全选复选框
            a.prop("checked",b.prop("checked"));
        },
        //全选--除全选按钮以外的所有复选框
        checkBtn:function(a,b){
            var $sel= a,
                flag=true;
            for(var i=0;i<$sel.length;i++){
                if($sel[i].checked==false){
                    flag=false;
                    break;
                }
            }
            b.prop("checked",flag);
        },
        //锚点链接
        anchor:function(a,time){
            //a表示当前点击的按钮
            var href = a.attr("href"),
                pos = $(href).offset().top;
            $("html,body").animate({scrollTop:pos}, time);
            return false;
        },
        //当元素出现在可视区域时再显示
        show:function (obj,className){
            //此方法主要用于页面内容时显示时添加效果,此处就可以给元素添加left_move、right_move、top_move、bottom_move来实现四个方向的移动。如show($(".intro_leftM"),"left_move");
            $(function(){
                var clientH=document.documentElement.clientHeight||document.body.clientHeight,
                    scrollT=$(this).scrollTop();
                for(var i=0;i<obj.length;i++){
                    var introH=$(obj[i]).height();
                    if($(obj[i]).offset().top-scrollT+introH>0&&$(obj[i]).offset().top-scrollT<clientH){
                        $(obj[i]).addClass(className);
                    }
                }
                $(document).on("scroll",function(){
                    var scrollT=$(this).scrollTop();
                    for(var i=0;i<obj.length;i++){
                        var conH=$(obj[i]).height();
                        if($(obj[i]).offset().top-scrollT+introH>0&&$(obj[i]).offset().top-scrollT<clientH){
                            $(obj[i]).addClass(className);
                        }
                    }
                })
            })
        },
        img_lazyLoad:function(imgSrc){
            //此方法给需要延迟加载的图片添加class名lazy,data-original中存放img的真实路径,2.jpg表示默认显示的图片
            //animation: fade-img .5s;
            //@-webkit-keyframes fade-img{0%{opacity:0}to{opacity:1}}
            var $lazy=$("img.lazy");
            $lazy.attr("src",imgSrc);
            $lazy.each(function () {
                var clientH = $(window).height(),
                    $height = $(this).height(),
                    $scroll = $(window).scrollTop(),
                    $off = $(this).offset().top,
                    $val=$(this).attr("data-original");
                if ($off + $height - $scroll < clientH) {
                    $(this).attr("src",$val);
                }
            })
        },
        //切换class
        toggleClass:function(a,className){
            a.addClass(className).siblings().removeClass(className);
        },
        notBlank:function(str) {
            //去除input框val值的空格
            var blank = /^S*$/;
            return str.replace(/s*/g, "");
        },
        matchEmail:function(str){
            //匹配邮箱
            var email=/^([w-])([w.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,5})$/;
            return email.test(str);
        },
        matchMobile:function(str){
            //匹配手机号
            var mobile=/^1[34578][0-9]{9}$/g;
            return mobile.test(str);
        },
        matchUser:function(str){
            //必须包含数字、小写字母、大写字母中至少两种  5-10位
            var user=/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)[0-9A-Za-z]{5,10}$/;
            return user.test(str);
        },
        zero:function (s){
            //对于小于10的数字,再数字前边补0,一般用于格式化日期
            return s < 10 ? '0' + s: s;
        },
        keyDown:function (event,func) {
            //回车事件 func表示验证需要提交的表单没有问题的时候,需要执行的函数
            if (event.keyCode == 13) {
                func();
            }
        },
        roll:function(opt){
            //无缝滚动效果
            //el表示滚动列表ul的直接父元素  也就是容器
            //list表示当前的滚动列表 也就是ul
            //direction表示滚动的方向 top或left
            //time表示滚动的时间间隔 一般20-30最佳
            //如果是横向滚动 li设置为inline-block比浮动效果更佳
            var timer;
            function move() {
                var range, _val, origin, $li = opt.list.find("li").eq(0);
                if (opt.direction == "top") {
                    range = opt.list.position().top;
                    _val = parseFloat($li.height()) + parseFloat($li.css("marginTop")) + parseFloat($li.css("marginBottom"));
                    if (range == -_val) {
                        origin = $li.detach();
                        opt.list.append(origin).css("top", range + _val)
                    }
                    if (opt.el.height() <= opt.list.height()) {
                        opt.list.css("top", --opt.list.position().top)
                    }
                } else {
                    var lenTotal = 0;
                    opt.list.find("li").each(function () {
                        lenTotal += parseFloat($(this).width()) + parseFloat($(this).css("marginRight")) + parseFloat($(this).css("marginLeft"))
                    });
                    opt.list.css("width", lenTotal);
                    range = opt.list.position().left;
                    _val = parseFloat($li.width()) + parseFloat($li.css("marginRight")) + parseFloat($li.css("marginLeft"));
                    if (range == -_val) {
                        origin = $li.detach();
                        opt.list.append(origin).css("left", range + _val)
                    }
                    if (opt.el.width() <= opt.list.width()) {
                        opt.list.css("left", --opt.list.position().left);
                    }
                }
                timer = window.setTimeout(move, opt.time)
            }
    
            function clear() {
                clearTimeout(timer);
                timer = null
            }
    
            move();
            opt.el.hover(function () {
                clear()
            }, function () {
                move()
            })
        },
        getDate:function (a,b){
            //获取当前日期
            //a表示年月日直接的分隔符,b表示时分秒之间的分隔符
            var dateStr="",
                nowT=new Date(),
                nowYear=nowT.getFullYear(),
                nowMonth=nowT.getMonth() + 1,
                nowDay=nowT.getDate(),
                nowHours=nowT.getHours(),
                nowMinites=nowT.getMinutes(),
                nowSeconds=nowT.getSeconds();
            if(a){
                dateStr= nowYear + a + method.zero(nowMonth) + a + method.zero(nowDay) + "    " + method.zero(nowHours) + b + method.zero(nowMinites) + b + method.zero(nowSeconds);
            }else{
                dateStr= nowYear + "年" + method.zero(nowMonth) + "月" + method.zero(nowDay) + "日" + "    " + method.zero(nowHours) + ":" + method.zero(nowMinites) + ":" + method.zero(nowSeconds);
            }
            return dateStr
        },
        showMenu:function(a,b,$this){
            //多级菜单方法
            //有ul子元素的li都有class名a
            //点击事件一般给clss名为a的直接子元素即ul的兄弟元素添加
            //点击的时候切换li的class名b,有class名b则显示其直接子元素ul
            if($this.parent(a).hasClass(b)){
                $this.parent(a).removeClass(b).find(a).removeClass(b)
            }else{
                $this.parent(a).addClass(b)
            }
        },
        countDown:function (date,ele,str) {
            //倒计时方法
            //date为截止日期,传入日期的时候年月日直接必须用/,否则IE不兼容
            //ele表示用于显示时间的元素,str表示毫秒差小于等于0时元素内显示的内容
            var timer;
            timer=window.setInterval(function () {
                var endTime = new Date(date),
                    nowTime = new Date(),
                    spanTime = endTime.getTime() - nowTime.getTime(),
                    day = Math.floor(spanTime / (1000 * 60 * 60 * 24)),
                    hours = Math.floor(spanTime / (1000 * 60 * 60)) % 24,
                    minutes = Math.floor(spanTime / (1000 * 60)) % 60,
                     seconds = Math.floor(spanTime / 1000) % 60;
                if (day > 0 || hours > 0 || minutes > 0 || seconds > 0) {
                    var strT = '<span class="timer" >' + method.zero(day) + '天' + method.zero(hours) + '小时' + method.zero(minutes) + '分' + method.zero(seconds) + '秒';
                    ele.html(strT);
                } else {
                    ele.html(str);
                    clearInterval(timer);
                }
            }, 1000)
        },
        numberScroll:function (a,url,list,num){
            //数字滚动效果:一组数字从左至右依次滚落
            //每一个数字模块list用一个ul模块包裹,而包裹所有数字模块list的容器就是a
            //这种效果需要直接执行此函数  还需要给window绑个scroll事件
            var clientH = $(window).height(),
                $scroll = $(window).scrollTop(),
                $height = a.height(),
                $off = a.offset().top;
            if ($off + $height - $scroll >$height  && $off + $height - $scroll <= clientH) {
                $.post(url,function(data){
                    var flag=32,data1=data.data,ary=data1.split(""),_len=ary.length,ary1=[];
                    if(_len < num){
                        var _dif = num - _len,aryStr="0";
                        for(var j = 0;j < _dif;j++){
                            ary1.unshift(aryStr);
                        }
                    }
                    ary= $.merge(ary1,ary);
                    /* var ary1=Number(ary[0]),ary2=Number(ary[1]),ary3=Number(ary[2]),ary4=Number(ary[3]),ary5=Number(ary[4]);
                    list.eq(0).animate({top:-ary1*flag+"px"},500);
                    list.eq(1).delay(500).animate({top:-ary2*flag+"px"},500);
                    list.eq(2).delay(800).animate({top:-ary3*flag+"px"},500);
                    list.eq(3).delay(1000).animate({top:-ary4*flag+"px"},500);
                    list.eq(4).delay(1000).animate({top:-ary5*flag+"px"},500);*/
                    $.each(ary,function(i,item){
                        var aryI="ary"+i;
                        aryI=Number(ary[i]);
                        if(i==0){
                            list.eq(i).animate({top:-aryI*flag+"px"},500)
                        }else{
                            list.eq(i).delay(500 + i*300).animate({top:-aryI*flag+"px"},500)
                        }
    
                    })
                });
            }else{
                list.stop(2000).css("top",0)
            }
        },
        versionRandom:function(){
            //给link和script添加随机的版本号
            $("link,script").each(function(){
                var t=Math.random().toFixed(4);
                if($(this).attr("src")){
                    var $src=$(this).attr("src");
                    $(this).attr("src",$src+"?v="+t)
                }else if($(this).attr("href")){
                    var $href=$(this).attr("href");
                    $(this).attr("href",$href+"?v="+t)
                }
            })
        },
        qqRoll:function (ele,time){
            //类似于qq的浮动框
            //ele用绝对定位定位在屏幕的最中间,left或right值自定义
            //需要给window绑定scroll事件实现动态效果
            var $win=$(window).height(),
                $scroll=$(document).scrollTop(),
                $height=ele.height();
            ele.animate({"top":$win/2+$scroll-$height/2},time)
        },
        noCopy:function(){
            //禁止密码框复制/剪切/粘贴
            $("input:password").on("copy cut paste", function (e) {
                return false;
            })
        },
        paraSwitch:function(para,className,num,more,contract,a){
            //显示段落中的一部分文字,其余用...代替
            //当点击段落中的更多按钮时,显示全部内容。否则为收缩。more表示更多  contract表示收缩
            //参数a表示是否有a标签  如果有的话则传0  没有的话传其他任何值均可
             var $text=para.find("p").html();
             var $text1=$text.substr(0,num)+"...";
             para.find("p").html($text1);
            if(a == 0){
                para.find("a").html(more);
                para.find("a").on("click",function(e){
                    $(e.currentTarget).parent().toggleClass(className);
                    if(para.hasClass(className)){
                        para.find("p").html($text1);
                        para.find("a").html(more);
                    }else{
                        para.find("p").html($text);
                        para.find("a").html(contract);
                    }
                })
                }
        },
        layerImg:function (ele,eleBg,url){
            //图片弹出层
            var $con=ele;
            $con.find("img").attr("src",url);
            $con.find("img").on("load",function(){
                var $conH=$(this).height(),
                    $conW=$(this).width(),
                    $winW=$(window).width(),
                    $winH=$(window).height();
                eleBg.css({"display":"block"});
                if($conH > $winH){
                    $(this).css({height:$winH,display:"block",top:"0",marginTop:"0",marginLeft:-$conW/2});
                }else if($conW > $winW){
                    $(this).css({"100%",display:"block",top:"50%",marginTop:-$conH/2,left:0,marginLeft:0});
                }
                else{
                    $(this).css({display:"block",top:"50%",marginTop:-$conH/2,marginLeft:-$conW/2});
                }
            })
        },
        layerImgClose:function(ele,$this){
            //图片弹出层的关闭事件,关闭事件绑定给半透明的背景
            $this.siblings(ele).find("img").css("display","none");
            $this.css("display","none");
        },
        selectBoxOpen:function(url,$this,param){
            //普通下拉框 显示下拉框
            //url表示下拉框内容的存放路径
            //param表示json文件中的属性名
            //对于不可用的select框,只需给drop-down添加class名disabled即可
            if($this.parents(".drop-down").hasClass("disabled") == false){
                $.post(url,function(data){
                    var $span=$this.html(),_eq;
                    var _ul="",oUl=$this.siblings("ul");
                    _ul+="<ul>";
                    if(param){
                        $.each(data[param],function(i,item){
                            _ul+="<li title='"+item+"'>"+item+"</li>";
                            if($span == item){
                                _eq=i;
                                return _eq
                            }
                        });
                    }else{
                        $.each(data,function(i,item){
                            _ul+="<li title="+item+">"+item+"</li>";
                            if($span == item){
                                _eq=i;
                                return _eq
                            }
                        });
                    }
                    _ul+="</ul>";
                    if(oUl.length > 0){
                        oUl.replaceWith(_ul);
                    }else{
                        $this.parents(".drop-down").append(_ul);
                    }
                    $this.parents(".drop-down").find("li").eq(_eq).addClass("sel").siblings().removeClass("sel");
                    oUl=$this.siblings("ul");
                    var _ulH=oUl.height(),spanH=$this.height(),_scrollT=$(window).scrollTop(),_winH=$(window).height(),_offT=$this.offset().top,$dropDown=$(".drop-down");
    
                    if(_winH - _offT + _scrollT - spanH - 2 >= _ulH){
                        oUl.css({top:"31px","border":"1px solid #ccc",borderTop:"none",bottom:"auto"})
                    }else{
                        oUl.css({bottom:"31px","border":"1px solid #ccc",borderBottom:"none",top:"auto"})
                    }
                    $("div").filter(".drop-down").not($this.parents('.drop-down')).removeClass("act");
                    $this.parents(".drop-down").toggleClass("act");
    
                    $this.parents(".drop-down").on("click",function(e){
                       e.stopPropagation();
                    });
                    $("body").one("click",function(e){
                        //这里需要注意 有时body高度没有撑开,视觉上会有不执行的效果
                         $(".drop-down").removeClass("act");
                    });
                });
    
            }
        },
        selectBoxClose:function(){
           //普通下拉框 选中内容后 关闭下拉框
        $('.drop-down').delegate("li","click",function(e){
            var $text=$(this).html();
            $(this).parents(".drop-down").removeClass("act");
            $(this).parents(".drop-down").find("span").html($text);
        })
        },
        addE:function(a,b,oUl,c){
            //省市区三级联动下拉框添加下拉列表内容
            var _ul="";
            _ul+="<ul>";
            if(c){
                $.each(a,function(i,item){
                    _ul+="<li title='"+item[c]+"'>"+item[c]+"</li>";
                });
            }else{
                $.each(a,function(i,item){
                    _ul+="<li title='"+item+"'>"+item+"</li>";
                });
            }
            _ul+="</ul>";
            if(oUl.length > 0){
                oUl.replaceWith(_ul);
            }else{
                b.append(_ul);
               /* var liStar="<li title='"+"请选择"+"'>"+"请选择"+"</li>";
                b.find("ul").prepend(liStar);*/
            }
    
        },
        selectAreaO:function(url,$this){
            //省市区三级联动显示下拉列表
            //url表示下拉框内容的存放路径
            //对于不可用的select框,只需给drop-down添加class名disabled即可
            if($this.parents(".drop-down").hasClass("disabled") == false){
                $.post(url,function(data){
                    if($this.parents(".drop-down").attr("id") == "province"){
                        if($("#province ul").length == 0){
                            method.addE(data,$this.parents(".drop-down"),$this.parents(".drop-down").find("ul"),"name");
                        }
                    }
                    oUl=$this.siblings("ul");
                    var _ulH=oUl.height(),spanH=$this.height(),_scrollT=$(window).scrollTop(),_winH=$(window).height(),_offT=$this.offset().top;
    
                    if(_winH - _offT + _scrollT - spanH - 2 >= _ulH){
                        oUl.css({top:"31px","border":"1px solid #ccc",borderTop:"none",bottom:"auto"})
                    }else{
                        oUl.css({bottom:"31px","border":"1px solid #ccc",borderBottom:"none",top:"auto"})
                    }
                    $("div").filter(".drop-down").not($this.parents('.drop-down')).removeClass("act");
                    $this.parents(".drop-down").toggleClass("act");
    
                    $this.parents(".drop-down").on("click",function(e){
                        e.stopPropagation();
                    });
                    $("body").one("click",function(e){
                        //这里需要注意 有时body高度没有撑开,视觉上会有不执行的效果
                        $(".drop-down").removeClass("act");
                    });
                });
    
            }
        },
        selectAreaC:function(){
            //省市区三级联动菜单显示下拉列表
            $('.drop-down').delegate("li","click",function(e){
                var province=$("#province"),city=$("#city"),town=$("#town");
                var $text=$(this).html(), provinceText,cityText,cityItem;
                $(this).addClass("sel").siblings().removeClass("sel");
                $(this).parents(".drop-down").removeClass("act");
                $(this).parents(".drop-down").find("span").html($text);
                if($(this).parents(".drop-down").attr("id") == "province"){
                    provinceText=province.find("span").html();
                    $.post("js/area.json",function(data){
                        $.each(data,function(i,item){
                            if(provinceText == item.name){
                                cityItem=i;
                                return cityItem
                            }
                        });
                        method.selectAreaRemove(city);
                        method.selectAreaRemove(town);
                        method.addE(data[cityItem].city,city,city.find("ul"),"name");
                    });
                }else if($(this).parents(".drop-down").attr("id") == "city"){
                    provinceText=province.find("span").html();
                    cityText=city.find("span").html();
                    $.post("js/area.json",function(data){
                        $.each(data,function(i,item){
                            if(provinceText == item.name){
                                cityItem=i;
                                return cityItem
                            }
                        });
                        method.selectAreaRemove(town);
                        $.each(data[cityItem].city,function(i,item){
                            if(cityText == item.name){
                                method.addE(item.area,town,town.find("ul"));
                            }
                        });
                    });
                }
            })
        },
        selectAreaRemove:function(ele){
            //省市区三级联动菜单移除下拉列表
            ele.find("span").html("请选择");
            ele.find("ul").remove();
        },
        baiDu_push:function(){
            //百度自动链接推送
            var bp = document.createElement('script');
            var curProtocol = window.location.protocol.split(':')[0];
            if (curProtocol === 'https') {
                bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
            }
            else {
                bp.src = 'http://push.zhanzhang.baidu.com/push.js';
            }
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(bp, s);
        },
        lessThenIE8:function () {
            //判断是否为IE8及以下,执行的时候,如果低于if8,则if(lessThenIE8)
            var UA = navigator.userAgent,
                isIE = UA.indexOf('MSIE') > -1,
                v = isIE ? /d+/.exec(UA.split(';')[1]) : 'no ie';
            return v <= 8;
        }(),
        layer:function (dom,callback1,callback2){
            //弹框插件升级版
            var body = $("body");
            var mask = $("<div class='mask'></div>");
            var mskCont = $(dom);
            body.append(mask);
            body.append(mskCont);
            var focusipt = body.find("input:focus");
            if(focusipt.length){focusipt.blur();}
            body.addClass("over_hidden");
            mskCont.css("margin","-"+(mskCont.height()/2)+"px -"+(mskCont.width()/2)+"px");
            mskCont.hide().fadeIn(300);
            var times = mskCont.find(".title .close"),close_btn=$(".close_btn");
            times.click(close);
            close_btn.click(close);
            mskCont.find(".layerCancel").click(function(){times.click();});
            mskCont.find(".layerConfirm").click(function(){sucCallBack();});
            function close(){
                var timer=null;
                mskCont.removeClass('showAlert').addClass("hideAlert");
                timer=setTimeout(function(){
                    clearTimeout(timer);
                    mask.remove();
                    mskCont.remove();
                    body.removeClass("over_hidden");
                    if(callback1){callback1();}
                    return false;
                },200);
            }
            function sucCallBack(){
                if(callback2){callback2();}
                return false;
            }
        },
        layerAlert:function(str,type,callback,title){
            var tit = title?title:"提示";
            var dom = "<div class="layerContent showAlert" data-animation='"+type+"'>"+
                "<div class="title"><span>"+tit+"</span><a class="close">&times;</a></div>"+
                "<div class="cont">"+str+"</div>"+
                "<div class="layerFoot"><input type="button" class="layerConfirm" value="确定"/></div>"+
                "</div>";
            method.layer(dom,callback,callback);
       },
        layerConfirm:function(str,type,callback1,callback2){
            var dom = "<div class="layerContent showAlert" data-animation='"+type+"'>"+
                "<div class="title"><span>提示</span><a class="close">&times;</a></div>"+
                "<div class="cont">"+str+"</div>"+
                "<div class="layerFoot">"+
                "<input type="button" class="layerConfirm" value="确定"/>"+
                "<input type="button" class="layerCancel" value="取消"/>"+
                "</div>"+
                "</div>";
            method.layer(dom,callback1,callback2);
        },
        layerLoad:function(url,type,title,callback,onload){
            $.get(url,{},function(data){
                if(!title){title="";}
                var dom;
                if(title == "noTitle"){
                    dom = "<div class="layerContent showAlert" data-animation='"+type+"'><div class="noTitle"><a class="close_btn">&times;</a></div>"+data+"</div>";
                }else{
                    dom = "<div class="layerContent showAlert" data-animation='"+type+"'><div class="title"><span>"+title+"</span><a class="close">&times;</a></div>"+data+"</div>";
                }
                method.layer(dom,callback,false);
                if(onload){onload();}
            });
        },
        layerClose:function(){
            var mask = $(".mask:last"),
                layerContent = $(".layerContent:last"),
                timer=null;
            layerContent.removeClass('showAlert').addClass("hideAlert");
            timer=setTimeout(function(){
                if(mask&&mask.length){
                    mask.remove();
                    $("body").removeClass("over_hidden");
                    if(layerContent.find("iframe").length){layerContent.find("iframe").remove();}
                    if(window.CollectGarbage){CollectGarbage();}
                    layerContent.remove();
                }
            },200)
        }
    };
    method.js
    /*从上到下*/
    @keyframes slideFromTop {
        0% {
            top: 0;
        }
        100% {
            top: 50%;
        }
    }
    @-webkit-keyframes slideFromTop {
        0% {
            top: 0;
        }
        100% {
            top: 50%;
        }
    }
    @-moz-keyframes slideFromTop {
        0% {
            top: 0;
        }
        100% {
            top: 50%;
        }
    }
    @-ms-keyframes slideFromTop {
        0% {
            top: 0;
        }
        100% {
            top: 50%;
        }
    }
    @-o-keyframes slideFromTop {
        0% {
            top: 0;
        }
        100% {
            top: 50%;
        }
    }
    @keyframes hideFromTop {
        0% {
            top: 50%;
        }
        100% {
            top:0;
            opacity: 0;
        }
    }
    @-webkit-keyframes hideFromTop {
        0% {
            top: 50%;
        }
        100% {
            top:0;
            opacity: 0;
        }
    }
    @-moz-keyframes hideFromTop {
        0% {
            top: 50%;
        }
        100% {
            top:0;
            opacity: 0;
        }
    }
    @-ms-keyframes hideFromTop {
        0% {
            top: 50%;
        }
        100% {
            top:0;
            opacity: 0;
            filter:Alpha(opacity=0)
        }
    }
    @-o-keyframes hideFromTop {
        0% {
            top: 50%;
        }
        100% {
            top:0;
            opacity: 0;
        }
    }
    /*从下到上*/
    @keyframes slideFromBottom {
        0% {
            top: 80%;
        }
        100% {
            top: 50%;
        }
    }
    @-webkit-keyframes slideFromBottom {
        0% {
            top: 80%;
        }
        100% {
            top: 50%;
        }
    }
    @-moz-keyframes slideFromBottom {
        0% {
            top: 80%;
        }
        100% {
            top: 50%;
        }
    }
    @-ms-keyframes slideFromBottom {
        0% {
            top: 80%;
        }
        100% {
            top: 50%;
        }
    }
    @-o-keyframes slideFromBottom {
        0% {
            top: 80%;
        }
        100% {
            top: 50%;
        }
    }
    @keyframes hideFromBottom {
        0% {
            top: 50%;
        }
        100% {
            top: 80%;
            opacity: 0;
        }
    }
    @-webkit-keyframes hideFromBottom {
        0% {
            top: 50%;
        }
        100% {
            top: 80%;
            opacity: 0;
        }
    }
    @-moz-keyframes hideFromBottom {
        0% {
            top: 50%;
        }
        100% {
            top: 80%;
            opacity: 0;
        }
    }
    @-ms-keyframes hideFromBottom {
        0% {
            top: 50%;
        }
        100% {
            top: 80%;
            opacity: 0;
            filter:Alpha(opacity=0)
        }
    }
    @-o-keyframes hideFromBottom {
        0% {
            top: 50%;
        }
        100% {
            top: 80%;
            opacity: 0;
        }
    }
    /*震动显示*/
    @keyframes showSweetAlert {
        0% {
            transform: scale(0.5);
        }
        45% {
            transform: scale(1.05);
        }
        80% {
            transform: scale(.95);
        }
        100% {
            transform: scale(1);
        }
    }
    @-webkit-keyframes showSweetAlert {
        0% {
            -webkit-transform: scale(0.5);
        }
        45% {
            -webkit-transform: scale(1.05);
        }
        80% {
            -webkit-transform: scale(.95);
        }
        100% {
            -webkit-transform: scale(1);
        }
    }
    @-moz-keyframes showSweetAlert {
        0% {
            -moz-transform: scale(0.5);
        }
        45% {
            -moz-transform: scale(1.05);
        }
        80% {
            -moz-transform: scale(.95);
        }
        100% {
            -moz-transform: scale(1);
        }
    }
    @-ms-keyframes showSweetAlert {
        0% {
            -ms-transform: scale(0.5);
        }
        33% {
            -ms-transform: scale(1.05);
        }
        66% {
            -ms-transform: scale(.95);
        }
        100% {
            -ms-transform: scale(1);
        }
    }
    @-o-keyframes showSweetAlert {
        0% {
            -o-transform: scale(0.5);
            }
        45% {
            -o-transform: scale(1.05);
            }
        80% {
            -o-transform: scale(.95);
           }
        100% {
            -o-transform: scale(1);
            }
    }
    @keyframes hideSweetAlert {
        0% {
            transform: scale(1);
        }
        45% {
            transform: scale(1.05);
        }
        80% {
            transform: scale(.95);
        }
        100% {
            transform: scale(0);
            opacity: 0;
        }
    }
    @-webkit-keyframes hideSweetAlert {
        0% {
            -webkit-transform: scale(1);
        }
        45% {
            -webkit-transform: scale(1.05);
        }
        80% {
            -webkit-transform: scale(.95);
        }
        100% {
            -webkit-transform: scale(0);
            opacity: 0;
        }
    }
    @-moz-keyframes hideSweetAlert {
        0% {
            -moz-transform: scale(1);
        }
        45% {
            -moz-transform: scale(1.05);
        }
        80% {
            -moz-transform: scale(.95);
        }
        100% {
            -moz-transform: scale(0);
            opacity: 0;
        }
    }
    @-ms-keyframes hideSweetAlert {
        0% {
            -ms-transform: scale(1);
        }
        45% {
            -ms-transform: scale(1.05);
        }
        80% {
            -ms-transform: scale(.95);
        }
        100% {
            -ms-transform: scale(0);
            opacity: 0;
            filter:Alpha(opacity=0)
        }
    }
    @-o-keyframes hideSweetAlert {
        0% {
            -o-transform: scale(1);
        }
        45% {
            -o-transform: scale(1.05);
        }
        80% {
            -o-transform: scale(.95);
        }
        100% {
            -o-transform: scale(0);
            opacity: 0;
        }
    }
    /*渐入*/
    @keyframes layerFadeIn{
        0% {
            opacity: 0;
            transform: scale(.5)
        }
        100% {
            opacity: 1;
            transform: scale(1)
        }
    }
    @-webkit-keyframes layerFadeIn{
        0% {
            opacity: 0;
            -webkit-transform: scale(.5)
        }
        100% {
            opacity: 1;
            -webkit-transform: scale(1)
        }
    }
    @-moz-keyframes layerFadeIn{
        0% {
            opacity: 0;
            -moz-transform: scale(.5)
        }
        100% {
            opacity: 1;
            -moz-transform: scale(1)
        }
    }
    @-ms-keyframes layerFadeIn{
        0% {
            opacity: 0;
            -ms-transform: scale(.5);
            filter:Alpha(opacity=0)
        }
        100% {
            opacity: 1;
            -ms-transform: scale(1);
            filter:Alpha(opacity=100)
        }
    }
    @-o-keyframes layerFadeIn{
        0% {
            opacity: 0;
            -o-transform: scale(.5)
        }
        100% {
            opacity: 1;
            -o-transform: scale(1)
        }
    }
    @keyframes hideFadeIn{
        0% {
            opacity: 1;
            transform: scale(1)
        }
        100% {
            transform: scale(.5);
            opacity: 0;
        }
    }
    @-webkit-keyframes hideFadeIn{
        0% {
            opacity: 1;
            -webkit-transform: scale(1)
        }
        100% {
            -webkit-transform: scale(.5);
            opacity: 0;
        }
    }
    @-moz-keyframes hideFadeIn{
        0% {
            opacity: 1;
            -moz-transform: scale(1)
        }
        100% {
            -moz-transform: scale(.5);
            opacity: 0;
        }
    }
    @-ms-keyframes hideFadeIn{
        0% {
            opacity: 1;
            -ms-transform: scale(1)
        }
        100% {
            -ms-transform: scale(.5);
            opacity: 0;
            filter:Alpha(opacity=0)
        }
    }
    @-o-keyframes hideFadeIn{
        0% {
            opacity: 1;
            -webkit-transform: scale(1)
        }
        100% {
            -webkit-transform: scale(.5);
            opacity: 0;
        }
    }
    @keyframes layer-fadeInUpBig {
        0% {
            opacity: 0;
            transform: translateY(2000px)
        }
        100% {
            opacity: 1;
            transform: translateY(0)
        }
    }
    @-webkit-keyframes layer-fadeInUpBig {
        0% {
            opacity: 0;
            -webkit-transform: translateY(2000px);
            transform: translateY(2000px)
        }
        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
            transform: translateY(0)
        }
    }
    @-moz-keyframes layer-fadeInUpBig {
        0% {
            opacity: 0;
            -moz-transform: translateY(2000px);
            transform: translateY(2000px)
        }
        100% {
            opacity: 1;
            -moz-transform: translateY(0);
            transform: translateY(0)
        }
    }
    @-ms-keyframes layer-fadeInUpBig {
        0% {
            opacity: 0;
            -ms-transform: translateY(2000px);
            transform: translateY(2000px);
            filter:Alpha(opacity=0)
        }
        100% {
            opacity: 1;
            -ms-transform: translateY(0);
            transform: translateY(0);
            filter:Alpha(opacity=100)
        }
    }
    @-o-keyframes layer-fadeInUpBig {
        0% {
            opacity: 0;
            -o-transform: translateY(2000px);
            transform: translateY(2000px)
        }
        100% {
            opacity: 1;
            -o-transform: translateY(0);
            transform: translateY(0)
        }
    }
    @keyframes hide-fadeInUpBig {
        0% {
            opacity: 1;
            transform: translateY(0)
        }
        100% {
            opacity: 0;
            transform: translateY(2000px)
        }
    }
    @-webkit-keyframes hide-fadeInUpBig {
        0% {
            opacity: 1;
            -webkit-transform: translateY(0);
            transform: translateY(0)
        }
        100% {
            opacity: 0;
            -webkit-transform: translateY(2000px);
            transform: translateY(2000px)
        }
    }
    @-moz-keyframes hide-fadeInUpBig {
        0% {
            opacity: 1;
            -moz-transform: translateY(0);
            transform: translateY(0)
        }
        100% {
            opacity: 0;
            -moz-transform: translateY(2000px);
            transform: translateY(2000px)
        }
    }
    @-ms-keyframes hide-fadeInUpBig {
        0% {
            opacity: 1;
            -ms-transform: translateY(0);
            transform: translateY(0);
            filter:Alpha(opacity=100)
        }
        100% {
            opacity: 0;
            -ms-transform: translateY(2000px);
            transform: translateY(2000px);
            filter:Alpha(opacity=0)
        }
    }
    @-o-keyframes hide-fadeInUpBig {
        0% {
            opacity: 1;
            -o-transform: translateY(0);
            transform: translateY(0)
        }
        100% {
            opacity: 0;
            -o-transform: translateY(2000px);
            transform: translateY(2000px)
        }
    }
    /*翻转*/
    @-webkit-keyframes layer-rollIn {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-100%) rotate(-120deg);
            transform: translateX(-100%) rotate(-120deg)
        }
        100% {
            opacity: 1;
            -webkit-transform: translateX(0) rotate(0);
            transform: translateX(0) rotate(0)
        }
    }
    @keyframes layer-rollIn {
        0% {
            opacity: 0;
            transform: translateX(-100%) rotate(-120deg)
        }
        100% {
            opacity: 1;
            transform: translateX(0) rotate(0)
        }
    }
    @-moz-keyframes layer-rollIn {
        0% {
            opacity: 0;
            -moz-transform: translateX(-100%) rotate(-120deg);
            transform: translateX(-100%) rotate(-120deg)
        }
        100% {
            opacity: 1;
            -moz-transform: translateX(0) rotate(0);
            transform: translateX(0) rotate(0)
        }
    }
    @-ms-keyframes layer-rollIn {
        0% {
            opacity: 0;
            -ms-transform: translateX(-100%) rotate(-120deg);
            transform: translateX(-100%) rotate(-120deg);
            filter:Alpha(opacity=0)
        }
        100% {
            opacity: 1;
            -ms-transform: translateX(0) rotate(0);
            transform: translateX(0) rotate(0);
            filter:Alpha(opacity=100)
        }
    }
    @-o-keyframes layer-rollIn {
        0% {
            opacity: 0;
            -o-transform: translateX(-100%) rotate(-120deg);
            transform: translateX(-100%) rotate(-120deg)
        }
        100% {
            opacity: 1;
            -o-transform: translateX(0) rotate(0);
            transform: translateX(0) rotate(0)
        }
    }
    @-webkit-keyframes hide-rollIn {
        0% {
            opacity: 1;
            -webkit-transform: translateX(0) rotate(0);
            transform: translateX(0) rotate(0)
        }
        100% {
            opacity: 0;
            -webkit-transform: translateX(-100%) rotate(-120deg);
            transform: translateX(-100%) rotate(-120deg)
        }
    }
    @keyframes hide-rollIn {
        0% {
            opacity: 1;
            transform: translateX(0) rotate(0)
        }
        100% {
            opacity: 0;
            transform: translateX(-100%) rotate(-120deg)
        }
    }
    @-moz-keyframes hide-rollIn {
        0% {
            opacity: 1;
            -moz-transform: translateX(0) rotate(0);
            transform: translateX(0) rotate(0)
        }
        100% {
            opacity: 0;
            -moz-transform: translateX(-100%) rotate(-120deg);
            transform: translateX(-100%) rotate(-120deg)
        }
    }
    @-ms-keyframes hide-rollIn {
        0% {
            opacity: 1;
            -ms-transform: translateX(0) rotate(0);
            transform: translateX(0) rotate(0);
            filter:Alpha(opacity=100)
        }
        100% {
            opacity: 0;
            -ms-transform: translateX(-100%) rotate(-120deg);
            transform: translateX(-100%) rotate(-120deg);
            filter:Alpha(opacity=0)
        }
    }
    @-o-keyframes hide-rollIn {
        0% {
            opacity: 1;
            -o-transform: translateX(0) rotate(0);
            transform: translateX(0) rotate(0)
        }
        100% {
            opacity: 0;
            -o-transform: translateX(-100%) rotate(-120deg);
            transform: translateX(-100%) rotate(-120deg)
        }
    }
    /*渐入*/
    @keyframes layer-fadeIn {
        0% {
            opacity: 0
        }
        100% {
            opacity: 1
        }
    }
    @-webkit-keyframes layer-fadeIn {
        0% {
            opacity: 0
        }
        100% {
            opacity: 1
        }
    }
    @-moz-keyframes layer-fadeIn {
        0% {
            opacity: 0
        }
        100% {
            opacity: 1
        }
    }
    @-o-keyframes layer-fadeIn {
        0% {
            opacity: 0
        }
        100% {
            opacity: 1
        }
    }
    @-ms-keyframes layer-fadeIn {
        0% {
            opacity: 0;
            filter:Alpha(opacity=0)
        }
        100% {
            opacity: 1;
            filter:Alpha(opacity=100)
        }
    }
    @keyframes hide-fadeIn {
        0% {
            opacity: 1
        }
        100% {
            opacity: 0
        }
    }
    @-webkit-keyframes hide-fadeIn {
        0% {
            opacity: 1
        }
        100% {
            opacity: 0
        }
    }
    @-moz-keyframes hide-fadeIn {
        0% {
            opacity: 1
        }
        100% {
            opacity: 0
        }
    }
    @-o-keyframes hide-fadeIn {
        0% {
            opacity: 1
        }
        100% {
            opacity: 0
        }
    }
    @-ms-keyframes hide-fadeIn {
        0% {
            opacity: 1
        }
        100% {
            opacity: 0;
            filter:Alpha(opacity=0)
        }
    }
    /*晃动*/
    @-webkit-keyframes layer-shake {
        0%, 100% {
            -webkit-transform: translateX(0);
            transform: translateX(0)
        }
        10%, 30%, 50%, 70%, 90% {
            -webkit-transform: translateX(-10px);
            transform: translateX(-10px)
        }
        20%, 40%, 60%, 80% {
            -webkit-transform: translateX(10px);
            transform: translateX(10px)
        }
    }
    @keyframes layer-shake {
        0%, 100% {
            transform: translateX(0)
        }
        10%, 30%, 50%, 70%, 90% {
            transform: translateX(-10px)
        }
        20%, 40%, 60%, 80% {
            transform: translateX(10px)
        }
    }
    @-moz-keyframes layer-shake {
        0%, 100% {
            -moz-transform: translateX(0);
            transform: translateX(0)
        }
        10%, 30%, 50%, 70%, 90% {
            -moz-transform: translateX(-10px);
            transform: translateX(-10px)
        }
        20%, 40%, 60%, 80% {
            -moz-transform: translateX(10px);
            transform: translateX(10px)
        }
    }
    @-ms-keyframes layer-shake {
        0%, 100% {
            -ms-transform: translateX(0);
            transform: translateX(0)
        }
        10%, 30%, 50%, 70%, 90% {
            -ms-transform: translateX(-10px);
            transform: translateX(-10px)
        }
        20%, 40%, 60%, 80% {
            -ms-transform: translateX(10px);
            transform: translateX(10px)
        }
    }
    @-o-keyframes layer-shake {
        0%, 100% {
            -o-transform: translateX(0);
            transform: translateX(0)
        }
        10%, 30%, 50%, 70%, 90% {
            -o-transform: translateX(-10px);
            transform: translateX(-10px)
        }
        20%, 40%, 60%, 80% {
            -o-transform: translateX(10px);
            transform: translateX(10px)
        }
    }
    @-webkit-keyframes hide-shake {
        0%, 100% {
            -webkit-transform: translateX(10px);
            transform: translateX(10px)
        }
        10%, 30%, 50%, 70%, 90% {
            -webkit-transform: translateX(-10px);
            transform: translateX(-10px)
        }
        20%, 40%, 60%, 80% {
            -webkit-transform: translateX(0);
            transform: translateX(0)
        }
        100%{
            opacity: 0;
        }
    }
    @keyframes hide-shake {
        0%, 100% {
            transform:translateX(10px)
        }
        10%, 30%, 50%, 70%, 90% {
            transform: translateX(-10px)
        }
        20%, 40%, 60%, 80% {
            transform: translateX(0)
        }
        100%{
            opacity: 0;
        }
    }
    @-moz-keyframes hide-shake {
        0%, 100% {
            -moz-transform: translateX(10px);
            transform: translateX(10px)
        }
        10%, 30%, 50%, 70%, 90% {
            -moz-transform: translateX(-10px);
            transform: translateX(-10px)
        }
        20%, 40%, 60%, 80% {
            -moz-transform: translateX(0);
            transform: translateX(0)
        }
        100%{
            opacity: 0;
        }
    }
    @-ms-keyframes hide-shake {
        0%, 100% {
            -ms-transform: translateX(10px);
            transform: translateX(10px)
        }
        10%, 30%, 50%, 70%, 90% {
            -ms-transform: translateX(-10px);
            transform: translateX(-10px)
        }
        20%, 40%, 60%, 80% {
            -ms-transform: translateX(0);
            transform: translateX(0)
        }
        100%{
            opacity: 0;
            filter:Alpha(opacity=0)
        }
    }
    @-o-keyframes hide-shake {
        0%, 100% {
            -o-transform: translateX(10px);
            transform: translateX(10px)
        }
        10%, 30%, 50%, 70%, 90% {
            -o-transform: translateX(-10px);
            transform: translateX(-10px)
        }
        20%, 40%, 60%, 80% {
            -o-transform: translateX(0);
            transform: translateX(0)
        }
        100%{
            opacity: 0;
        }
    }
    /*扩展放大*/
    @keyframes layer-spread {
        0%{
            transform:scaleX(0);
            opacity: 0;
        }
        100% {
            transform:scaleX(1);
            opacity: 1;
        }
    }
    @-webkit-keyframes layer-spread {
        0%{
            -webkit-transform:scaleX(0);
            opacity: 0;
        }
        100% {
            -webkit-transform:scaleX(1);
            opacity: 1;
        }
    }
    @-moz-keyframes layer-spread {
        0%{
            -moz-transform:scaleX(0);
            opacity: 0;
        }
        100% {
            -moz-transform:scaleX(1);
            opacity: 1;
        }
    }
    @-o-keyframes layer-spread {
        0%{
            -o-transform:scaleX(0);
            opacity: 0;
        }
        100% {
            -o-transform:scaleX(1);
            opacity: 1;
        }
    }
    @-ms-keyframes layer-spread {
        0%{
            -ms-transform:scaleX(0);
            opacity: 0;
            filter:Alpha(opacity=0)
        }
        100% {
            -ms-transform:scaleX(1);
            opacity: 1;
            filter:Alpha(opacity=100)
        }
    }
    @keyframes hide-spread {
        0%{transform:scaleX(1)}
        50%{transform:scaleX(.5)}
        100%{transformX:scaleX(0%);opacity:0;}
    }
    @-webkit-keyframes hide-spread {
        0%{-webkit-transform:scaleX(1)}
        50%{-webkit-transform:scaleX(.5)}
        100%{-webkit-transform:scaleX(0);opacity:0;}
    }
    @-moz-keyframes hide-spread {
        0%{-moz-transform:scaleX(1)}
        50%{-moz-transform:scaleX(.5)}
        100%{-moz-transform:scaleX(0);opacity:0;}
    }
    @-ms-keyframes hide-spread {
        0%{-ms-transform:scaleX(1)}
        50%{-ms-transform:scaleX(.5)}
        100%{-ms-transform:scaleX(0);opacity:0;filter:Alpha(opacity=0)}
    }
    .showAlert[data-animation=layerFadeIn] {
        animation: layerFadeIn .3s;
        -webkit-animation: layerFadeIn .3s;
        -moz-animation: layerFadeIn .3s;
        -ms-animation: layerFadeIn .3s;
        -o-animation: layerFadeIn .3s;
    }
    .showAlert[data-animation=showSweetAlert] {
        animation: showSweetAlert .3s;
        -webkit-animation: showSweetAlert .3s;
        -moz-animation: showSweetAlert .3s;
        -ms-animation: showSweetAlert .3s;
        -o-animation: showSweetAlert .3s;
    }
    
    .showAlert[data-animation=none] {
        animation: none;
        -webkit-animation: none;
        -moz-animation: none;
        -ms-animation: none;
        -o-animation: none;
    }
    
    .showAlert[data-animation=slideFromTop] {
        animation: slideFromTop .3s;
        -webkit-animation: slideFromTop .3s;
        -moz-animation: slideFromTop .3s;
        -ms-animation: slideFromTop .3s;
        -o-animation: slideFromTop .3s;
    }
    
    .showAlert[data-animation=slideFromBottom] {
        animation: slideFromBottom .2s;
        -webkit-animation: slideFromBottom .2s;
        -moz-animation: slideFromBottom .2s;
        -ms-animation: slideFromBottom .2s;
        -o-animation: slideFromBottom .2s;
    }
    .showAlert[data-animation=layer-fadeInUpBig] {
        animation: layer-fadeInUpBig .2s;
        -webkit-animation: layer-fadeInUpBig .2s;
        -moz-animation: layer-fadeInUpBig .2s;
        -ms-animation: layer-fadeInUpBig .2s;
        -o-animation: layer-fadeInUpBig .2s;
    }
    .showAlert[data-animation=layer-rollIn] {
        animation: layer-rollIn .3s;
        -webkit-animation: layer-rollIn .3s;
        -moz-animation: layer-rollIn .3s;
        -ms-animation: layer-rollIn .3s;
        -o-animation: layer-rollIn .3s;
    }
    .showAlert[data-animation=layer-fadeIn] {
        animation: layer-fadeIn .3s;
        -webkit-animation: layer-fadeIn .3s;
        -moz-animation: layer-fadeIn .3s;
        -ms-animation: layer-fadeIn .3s;
        -o-animation: layer-fadeIn .3s;
    }
    .showAlert[data-animation=layer-shake] {
        animation: layer-shake .3s;
        -webkit-animation:layer-shake .3s;
        -moz-animation: layer-shake .3s;
        -ms-animation: layer-shake .3s;
        -o-animation: layer-shake .3s;
    }
    .showAlert[data-animation=layer-spread] {
        animation: layer-spread .2s;
        -webkit-animation:layer-spread .2s;
        -moz-animation: layer-spread .2s;
        -ms-animation: layer-spread .2s;
        -o-animation: layer-spread .2s;
    }
    
    .hideAlert[data-animation=layer-spread] {
        animation: hide-spread .5s forwards;
        -webkit-animation:hide-spread .5s forwards;
        -moz-animation: hide-spread .5s forwards;
        -ms-animation: hide-spread .5s forwards;
        -o-animation: hide-spread .5s forwards;
    }
    .hideAlert[data-animation=slideFromTop] {
        animation: hideFromTop .2s forwards;
        -webkit-animation:hideFromTop .2s forwards;
        -moz-animation: hideFromTop .2s forwards;
        -ms-animation: hideFromTop .2s forwards;
        -o-animation: hideFromTop .2s forwards;
    }
    .hideAlert[data-animation=slideFromBottom] {
        animation: hideFromBottom .2s forwards;
        -webkit-animation:hideFromBottom .2s forwards;
        -moz-animation: hideFromBottom .2s forwards;
        -ms-animation: hideFromBottom .2s forwards;
        -o-animation: hideFromBottom .2s forwards;
    }
    .hideAlert[data-animation=showSweetAlert] {
        animation: hideSweetAlert .2s forwards;
        -webkit-animation:hideSweetAlert .2s forwards;
        -moz-animation: hideSweetAlert .2s forwards;
        -ms-animation: hideSweetAlert .2s forwards;
        -o-animation: hideSweetAlert .2s forwards;
    }
    .hideAlert[data-animation=layerFadeIn] {
        animation: hideFadeIn .2s forwards;
        -webkit-animation:hideFadeIn .2s forwards;
        -moz-animation: hideFadeIn .2s forwards;
        -ms-animation: hideFadeIn .2s forwards;
        -o-animation: hideFadeIn .2s forwards;
    }
    .hideAlert[data-animation=layer-fadeIn] {
        animation: hide-fadeIn .2s forwards;
        -webkit-animation:hide-fadeIn .2s forwards;
        -moz-animation: hide-fadeIn .2s forwards;
        -ms-animation: hide-fadeIn .2s forwards;
        -o-animation: hide-fadeIn .2s forwards;
    }
    .hideAlert[data-animation=layer-fadeInUpBig] {
        animation: hide-fadeInUpBig .2s forwards;
        -webkit-animation:hide-fadeInUpBig .2s forwards;
        -moz-animation: hide-fadeInUpBig .2s forwards;
        -ms-animation: hide-fadeInUpBig .2s forwards;
        -o-animation: hide-fadeInUpBig .2s forwards;
    }
    .hideAlert[data-animation=layer-rollIn] {
        animation: hide-rollIn .2s forwards;
        -webkit-animation:hide-rollIn .2s forwards;
        -moz-animation: hide-rollIn .2s forwards;
        -ms-animation: hide-rollIn .2s forwards;
        -o-animation: hide-rollIn .2s forwards;
    }
    .hideAlert[data-animation=layer-shake] {
        animation: hide-shake .2s forwards;
        -webkit-animation:hide-shake .2s forwards;
        -moz-animation: hide-shake .2s forwards;
        -ms-animation: hide-shake .2s forwards;
        -o-animation: hide-shake .2s forwards;
    }
    
    .msg-layer-bg {
        width: 100%;
        z-index: 999;
        position: fixed;
        background: #000;
        opacity: 0.4;
        top: 0;
        height: 100%;
        filter: alpha(opacity=50);
    }
    .msg-layer{
        z-index: 9999;
        position: fixed;
        left: 50%;
        top: 50%;
        text-align:center;
        opacity: 1;
        filter: alpha(opacity=100);
        padding: 0 10px 10px;
        background:#fff;
        border-radius: 5px;
        max-width: 800px;
        min-width: 300px;
    }
    .msg-con{
        padding: 10px;
        word-break: break-all;
    }
    .layer-close{
        display: none;
        position: absolute;
        right: 10px;
        top: 0;
        font-size: 32px;
        color: #d02f30;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
    }
    .msg-layer>h5{
        font-size:18px;
        line-height:38px;
        border-bottom:1px solid #ccc;
    }
    .layer-btn{
        padding:16px 0 10px;
        text-align: center;
    }
    .layer-btn>input{
        display:none;
        width:100px;
        height:36px;
        line-height:36px;
        text-align: center;
        color:#fff;
        font-size: 14px;
        border-radius: 5px;
        cursor: pointer;
        border:none;
        outline: none;
    }
    
    .layer-cancel{
        background:#ccc9c9;
    }
    .layer-commit{
        background:#50bce0;
        margin-left: 10px;
    }
    .msy-alert{
        position: fixed;
        top: 50%;
        left: 50%;
        min-width: 260px;
        max-width: 500px;
        padding: 10px;
        text-align: center;
        line-height: 20px;
        font-size: 14px;
        color: #000;
        z-index: 99999;
        background: #fff;
        border:1px solid #bfbfbf;
        box-shadow:0 0 7px 0 #b5b3b3;
        -webkit-box-shadow:0 0 7px 0 #b5b3b3;
        -moz-box-shadow:0 0 7px 0 #b5b3b3;
        -ms-box-shadow:0 0 7px 0 #b5b3b3;
        -o-box-shadow:0 0 7px 0 #b5b3b3;
    }
    layer-animate.css
  • 相关阅读:
    Dom对象,控制html元素
    运算符总结
    数组
    变量命名规则
    css实现气泡说明框
    深入理解CSS中的层叠上下文和层叠顺序
    jquery书写
    二级导航
    iis配置
    Android ListView无法触发ItemClick事件
  • 原文地址:https://www.cnblogs.com/dongxiaolei/p/8073741.html
Copyright © 2011-2022 走看看