移动端 Tips插件代码

来源：互联网发布：趴在桌上睡觉知乎编辑：程序博客网时间：2024/06/05 16:38

主要有4中提示窗口，成功，错误，提示和加载窗口（2个）。书写这个插件，用到了js的面向对象编程，css3的动画技术。应该有一点点学习价值，欢迎围观。由于是动态的提示框，不好截图，就不上效果图了，想看效果图，直接把代码拷过去，运行下就好了。话不多说，直接上代码。**这是页面代码：**

<!DOCTYPE HTML><html lang="en-US"><head>    <meta charset="UTF-8">    <title>tips</title>    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />    <link rel="stylesheet"  href="tips.css">    <script type="text/javascript" src="jquery-3.2.0.js"></script></head><body>    <button id="success" onclick="success()">success</button>    <button id="error" onclick="error()">error</button>    <button id="info" onclick="info()">info</button>    <button id="loading1" onclick="loading1()">loading1</button>    <button id="loading2" onclick="loading2()">loading2</button>    <!-- <div class="tip-mask"></div>    <div class="tip-content">        <div class="icon success">            <div class="left-line"></div>            <div class="right-line"></div>        </div>        <div class="text">加载成功</div>    </div> -->    <!-- <div class="tip-mask"></div>    <div class="tip-content">        <div class="icon error">            <div class="left-line"></div>            <div class="right-line"></div>        </div>        <div class="text">加载失败</div>    </div> -->    <!-- <div class="tip-mask"></div>    <div class="tip-content">        <div class="icon info">            <div class="circle">i</div>        </div>        <div class="text">提示信息</div>    </div> -->    <!-- <div class="tip-mask"></div>    <div class="tip-content">        <div class="icon loading">        </div>        <div class="text">正在加载...</div>    </div> -->    <!-- <div class="tip-mask"></div>    <div class="tip-content">        <div class="icon loading2">            <div class="cir-box1">                <div class="cir1"></div>                <div class="cir2"></div>                <div class="cir3"></div>                <div class="cir4"></div>            </div>            <div class="cir-box2">                <div class="cir1"></div>                <div class="cir2"></div>                <div class="cir3"></div>                <div class="cir4"></div>            </div>            <div class="cir-box3">                <div class="cir1"></div>                <div class="cir2"></div>                <div class="cir3"></div>                <div class="cir4"></div>            </div>            <div class="cir-box4">                <div class="cir1"></div>                <div class="cir2"></div>                <div class="cir3"></div>                <div class="cir4"></div>            </div>        </div>        <div class="text">正在加载...</div>    </div> --><script type="text/javascript">    function success(){        new TipBox({type:'success',str:'加载成功'})    }    function error(){        new TipBox({type:'error',str:'加载失败'});    }    function info(){        new TipBox({type:'info',str:'提示信息',clickDomCancel:true,autoClose:false});    }    function loading1(){        var tip = new TipBox({type:'loading1',str:'正在加载...',autoClose:false,callback:function(){            new TipBox({type:'success',str:'加载成功'});        }});        // 模拟数据加载        setTimeout(function(){            tip._close();        },2000);     }    function loading2(){        var tip = new TipBox({type:'loading2',str:'正在加载...',autoClose:false,callback:function(){            new TipBox({type:'success',str:'加载成功'});        }});        // 模拟数据加载        setTimeout(function(){            tip._close();        },2000);     }    function TipBox(cfg){        this.config = {            type:"success",            str:"操作成功",            time:"1000",            autoClose:true,            clickDomCancel:false,            callback:null        }        $.extend(this.config,cfg);        //初始化控件        this._init(this.config.type);        //绑定事件        this._bindEvent();    }    TipBox.prototype._bindEvent = function(){        var that = this;        this.config.autoClose && setTimeout(function(){                that._close();            },this.config.time);        this.config.clickDomCancel && this.mask.click(function(){            that._close();        });    }    TipBox.prototype._init = function(type){        var that = this;        this._initUI(type);        $('body').append(TipBox.prototype.contentBox).append(TipBox.prototype.mask);       }    TipBox.prototype._initUI = function(type){        TipBox.prototype.contentBox = $('<div class="tip-content"></div>');        TipBox.prototype.mask = $('<div class="tip-mask"></div>');        type=='success' && this._initSuccessUI();        type=='error' && this._initErrorUI();        type=='info' && this._initInfoUI();        type=='loading1' && this._initLoading1UI();        type=='loading2' && this._initLoading2UI();    }    TipBox.prototype._initSuccessUI = function(){        var arr = '<div class="icon success"><div class="left-line"></div>'            +'<div class="right-line"></div></div><div class="text">'+this.config.str+'</div>';        this.contentBox.append(arr);    }    TipBox.prototype._initErrorUI = function(){        var arr = '<div class="icon error"><div class="left-line"></div>'            +'<div class="right-line"></div></div><div class="text">'+this.config.str+'</div>';        this.contentBox.append(arr);    }    TipBox.prototype._initInfoUI = function(){        var arr = '<div class="icon info"><div class="circle">i</div>'            +'<div class="text">'+this.config.str+'</div>';        this.contentBox.append(arr);    }    TipBox.prototype._initLoading1UI = function(){        var arr = '<div class="icon loading"></div>'            +'<div class="text">'+this.config.str+'</div>';        this.contentBox.append(arr);    }    TipBox.prototype._initLoading2UI = function(){        var arr = '<div class="icon loading2">';        for(var i=1;i<=4;i++){            arr+='<div class="cir-box'+i+'"><div class="cir1"></div><div class="cir2"></div><div class="cir3"></div><div class="cir4"></div></div>';        }        arr+='</div><div class="text">'+this.config.str+'</div>';        this.contentBox.append(arr);    }    TipBox.prototype._close = function(){        this._destroy();        typeof this.config.callback === 'function' && this.config.callback()    }    TipBox.prototype._destroy = function(){        this.contentBox.remove();        this.mask.remove();    }</script></body></html>

**css代码：**

body{    font-family: "Microsoft Yahei","微软雅黑",Arial,Tahoma;}.tip-mask{    position: fixed;    top: 0px;    left: 0px;    width: 100%;    height: 100%;    z-index: 1000;    background-color: #000;    opacity: 0.6;}.tip-content{    position: absolute;    top: 50%;    left: 50%;    height: auto;    width: 180px;    min-height: 150px;    margin-top: -75px;    margin-left: -90px;    border-radius: 10px;    z-index: 1001;    background-color: #fff;}.tip-content .icon{    position: relative;    width: 80px;    height: 80px;    margin: 15px auto 5px auto;    border:4px solid;    border-radius: 100%; }/* 成功 */.tip-content .success{    border-color: #66cc33;}.tip-content .success .left-line{    position: absolute;    width: 25px;    height: 5px;    top: 46px;    left: 14px;    background-color: #66cc33;    border-radius: 4px;    transform: rotate(45deg);    animation: left_success_animation 0.6s;}.tip-content .success .right-line{    position: absolute;    width: 47px;    height: 5px;    top: 38px;    right: 8px;    background-color: #66cc33;    border-radius: 4px;    transform: rotate(-45deg);    animation: right_success_animation 0.6s;}.tip-content .text{    position: relative;    width: 100%;    height: 26px;    padding: 5px 0px 10px 0px;    text-align: center;    line-height: 26px;    font-size: 16px;    color:#666; }@keyframes left_success_animation{    0% {        width: 0;          left: 1px;          top: 19px;      }      54% {          width: 0;          left: 1px;          top: 19px;      }      70% {          width: 50px;          left: -4px;          top: 37px;      }      84% {          width: 17px;          left: 21px;          top: 48px;      }      100% {          width: 25px;          left: 14px;          top: 45px;      }  }@keyframes right_success_animation{    0% {          width: 0;          right: 46px;          top: 54px;      }      65% {          width: 0;          right: 46px;          top: 54px;       }      84% {          width: 55px;          right: 0px;          top: 35px;       }      100% {          width: 47px;          right: 8px;          top: 38px;       }   }/* 警告 */.tip-content .error{    border-color: #FF9090;}.tip-content .error .left-line{    position: absolute;    width: 50px;    height: 5px;    top: 50%;    left: 50%;    margin-left: -25px;    background-color: #FF9090;    border-radius: 4px;    transform: rotate(45deg);    animation: left_error_animation 0.6s;}.tip-content .error .right-line{    position: absolute;    width: 50px;    height: 5px;    top: 50%;    left: 50%;    margin-left: -25px;    background-color: #FF9090;    border-radius: 4px;    transform: rotate(-45deg);    animation: right_error_animation 0.6s;}@keyframes left_error_animation{    0% {        width: 0px;          margin-left: 0px;        opacity: 0;      }      20% {        width: 20px;          margin-left: -10px;        opacity: 0.5;      }    40% {          width: 30px;          margin-left: -15px;        opacity: 1;      }          80% {          width: 50px;          margin-left: -25px;      }     100%{        width: 50px;          margin-left: -25px;      } }@keyframes right_error_animation{    0% {        width: 0px;          margin-left: 0px;        opacity: 0;      }      20% {        width: 20px;          margin-left: -10px;        opacity: 0.5;      }    40% {          width: 30px;          margin-left: -15px;        opacity: 1;      }          80% {          width: 50px;          margin-left: -25px;      }     100%{        width: 50px;          margin-left: -25px;      }}/* 提示 */.tip-content .info{    border-color: #6EB3B9;    background-color: #6EB3B9;}.tip-content .info .circle{    width: 80px;    height: 80px;    border-radius: 80px;    border:0px;    font-size: 80px;    line-height: 80px;    color: #fff;    text-align: center;}/* 加载动画1*/.tip-content .loading{    border: 0px;    background-image: url('loading.png');    background-size: 80px 80px;    animation: loading_animation 1.2s infinite linear;}@keyframes loading_animation{    0%{        transform: rotate(0deg);    }    100%{        transform: rotate(360deg);    }}/* 加载动画2*/.tip-content .loading2{    border: 0px;    width: 60px;    height: 60px;    margin: 25px auto 15px auto;}.tip-content .loading2>div{    position: absolute;    width: 60px;    height: 60px;}@keyframes loading1{    from{        transform: rotate(0deg);    }    to{        transform: rotate(360deg);    }}@keyframes loading2{    from{        transform: rotate(30deg);    }    to{        transform: rotate(390deg);    }}@keyframes loading3{    from{        transform: rotate(60deg);    }    to{        transform: rotate(420deg);    }}@keyframes loading4{    from{        transform: rotate(90deg);    }    to{        transform: rotate(450deg);    }}.cir-box1{    animation: loading1 1s infinite linear;}.cir-box2{    animation: loading2 1s infinite linear;}.cir-box3{    animation: loading3 1s infinite linear;}.cir-box4{    animation: loading4 1s infinite linear;}.tip-content .loading2>div>div{    position: absolute;    height: 10px;    width: 10px;    border-radius: 10px;    background-color: #ccc;}.cir1{    left: 0px;    top: 0px;}.cir2{    right: 0px;    top: 0px;}.cir3{    left: 0px;    bottom: 0px;}.cir4{    right: 0px;    bottom: 0px;}.cir-box4 .cir3{    background-color: gray!important;}.cir-box2 .cir1{    background-color: blue!important;}.cir-box3 .cir1{    background-color: green!important;}.cir-box4 .cir1{    background-color: yellow!important;}

jQuery插件，自行去下载一个就好了。本人只在chrome浏览器上调试运行，如果想兼容各种浏览器，自行加上，前缀（-moz-、-ms-、-o-、-webkit-）。

0 0