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({width:_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({width:$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({width:"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

 

posted @ 2017-12-20 14:55  dongxiaolei  阅读(258)  评论(0编辑  收藏  举报