移动端 Tips插件代码

最新推荐文章于 2023-03-31 13:21:30 发布
最新推荐文章于 2023-03-31 13:21:30 发布
阅读量1.1k 收藏 1
点赞数
文章标签： css3 插件 移动 面向对象编程 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sszcome/article/details/64923937
版权 
主要有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
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery_Tips_插件
07-01
**jQuery_Tips_插件详解** 在Web开发中，我们经常需要为页面元素提供额外的信息提示，例如，当鼠标悬停在某个按钮或链接上时显示一个小提示框，这种功能通常被称为“tooltip”。jQuery_Tips插件就是这样一个工具，...
Android代码-Android-Tips
08-06
Android-Tips This is an awesome list of tips for android. If you are a beginner, this list will be the first choice for you when you have a difficult time. Welcome Star and Fork, your support is my ...
移动web：Tips消息弹出框
weixin_30773135的博客
11-24 187
　　在web开发中经常会用到像alert这样的弹出消息，每个浏览器自带的消息弹出框都不相同。为了统一外观，实现自定义的功能，动手写一个弹出框插件。 　　对弹出框的实现要求如下： 　　1. 仿照IOS系统弹出外观 　　2. 自定义按钮文字 　　3. 宽高自适应(有最小宽、最大宽限制) 　　4. 实现弹出框关闭（前、后）的回调 （重点）由于很多操作都是在弹出框显示时操作的 　　先看...
3种形式tips帮助提示框代码，鼠标悬停在问号上，出现提示框。提示框有纯文字，html代码，图片三种形式。兼容主流浏览器
05-23
3种形式tips帮助提示框代码，鼠标悬停在问号上，出现提示框。提示框有纯文字，html代码，图片三种形式。兼容主流浏览器
手机网站的几点注意
繁华过后你还有我
10-19 745
对于手机网站建设，总结了如下几点注意： 1、 安卓浏览器看背景图片，有些设备会模糊。 用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？ 经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRat
TIPS--移动端做适配
weixin_33912246的博客
08-31 130
1.meta viewport <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> // width=device-width: 让当前viewport宽度等于设备的宽度 // user-scalable=no: 禁止用...
代码Tips
keil_的博客
01-30 434
在Python中,字符串是不可变类型, sorted(key=lambda): setdefault函数的用法及理解 dict.setdefault(key, default=None)功能：如果键不存在于字典中，将会添加该键并将default的值设为该键的默认值，如果键存在于字典中，将读出该键原来对应的值...
JQuery插件 tips
11-09
一款jquery提示插件，poshytip
Tips展开关闭问答特效代码
03-20
【标题】"Tips展开关闭问答特效代码"涉及的是在网页设计或前端开发中实现一种交互式的问答效果。这种效果通常指的是在用户点击问题时，答案会以动画的形式展开，再次点击则关闭答案显示。这种特效可以提升用户体验，...
移动端分享代码插件
07-20
百度浏览器支持，uc支持，qq浏览器支持
jquery-tips悬浮提示插件分享
12-02
* jquery tips 提示插件 jquery.tips.js v0.1beta * * 使用方法 * $(selector).tips({ //selector 为jquery选择器 * msg:'your messages!', //你的提示消息 必填 * side:1, //提示窗显示位置 1，2，3，4 分别代表 上...
快速生成代码tips
最新发布
qq_53700296的博客
03-31 126
2.如果想要生成多个相同的标签，打一个标签加上*就可以了 div*3 就可以生成三对div。1.生成标签直接输入标签名按tab健即可，打一个div，按一下tab，就有一对div。5.如果生成带有类名或者id名字的 直接写 .demo 或者#two tab健就可以了。w200 --按tab--生成-- width:200px;3.如果有父子级的标签，可以用> 比如 ul>li 包含关系。6.如果生成的div类名是有顺序的，可以用自增符号$如 w--按tab--生成-- width <br>
移动端页面一些小tips
Andrew_SJ的博客
08-04 197
一： 点击div跳转新页面. 不要用<router-link :to="..."></router-link>包裹div，而是给div绑定点击事件，再用$route.push()方法做路由跳转。 例子： <div class="flex-grow w-40 h-36 ml-4 pl-5 pt-6 text-xl text-white" style="background-color: #2e7d32" @click="$router.push({name:'Furniture
Java代码优化Tips
fjian123的博客
05-17 241
前言2016年3月修改，结合自己的工作和平时学习的体验重新谈一下为什么要进行代码优化。在修改之前，我的说法是这样的：就像鲸鱼吃虾米一样，也许吃一个两个虾米对于鲸鱼来说作用不大，但是吃的虾米多了，鲸鱼自然饱了。 代码优化一样，也许一个两个的优化，对于提升代码的运行效率意义不大，但是只要处处都能注意代码优化，总体来说对于提升代码的运行效率就很有用了。这个观点，在现在看来，是要进行代码优化的一个原因，但...
移动端的小TIPS
lyl123666666的博客
11-03 124
移动端的小TIPS
移动端开发tips
aiuzi的博客
05-19 104
1. 标签中的内容，触碰上会有蓝色的遮罩，去除方法： a{ -webkit-tap-highlight-color:transparent; } 2. 移动屏幕简单适配方案(解决不了1px边框的问题) 解决字体大小的问题 document.documentElement.style.fontSize = viewWidth/ratio +'px 视口宽的获取 viewWidth = document.documentElement.getBoudingClientRect().width||w
手机html 一直处于hover,手机端实现Tooltip (Hover)
weixin_39942033的博客
06-17 432
参考后实现如下：Html: 用了angularjs的ng-repeat{{Qus.qus}}css:.questiontext{margin-left: 35px;padding-top: 2px;display: inline-block;min-width:400px;}[tooltip-content]{position:relative;}[tooltip-content]:after{c...
tips.js提示框插件
g_blue_wind的博客
07-18 9255
DOCTYPE html> html>     head>         title>demotitle>         meta charset="UTF-8">         script type="text/javascript" src="js/jquery.js">script>         script ty
Swift编程技巧：100个必备Tips
"Swifter - 100 个 Swift 必备 tips，由王巍（onevcat）创作，提供了一本关于 Swift 编程语言的实用技巧集锦，涵盖多个核心概念和技术，旨在帮助开发者提升 Swift 开发效率。" 在 Swift 编程语言中，这100个必备 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值