zoukankan      html  css  js  c++  java
  • Jquery 仿 android Toast效果

    JS代码如下:

    /**
     * 模仿android里面的Toast效果,主要是用于在不打断程序正常执行的情况下显示提示数据
     * @param config
     * @return
     */
    var Toast = function(config){
     this.context = config.context==null?$('body'):config.context;//上下文
     this.message = config.message;//显示内容
     this.time = config.time==null?3000:config.time;//持续时间
     this.left = config.left;//距容器左边的距离
     this.top = config.top;//距容器上方的距离
     this.init();
    }
    var msgEntity;
    Toast.prototype = {
     //初始化显示的位置内容等
     init : function(){
      $("#toastMessage").remove();
      //设置消息体
      var msgDIV = new Array();
      msgDIV.push('<div id="toastMessage">');
      msgDIV.push('<span>'+this.message+'</span>');
      msgDIV.push('</div>');
      msgEntity = $(msgDIV.join('')).appendTo(this.context);
      //设置消息样式
      var left = this.left == null ? this.context.width()/2-msgEntity.find('span').width()/2 : this.left;
      var top = this.top == null ? '20px' : this.top;
      msgEntity.css({position:'absolute',top:top,'z-index':'99',left:left,'background-color':'black',color:'white','font-size':'18px',padding:'10px',margin:'10px'});
      msgEntity.hide();
     },
     //显示动画
     show :function(){
      msgEntity.fadeIn(this.time/2);
      msgEntity.fadeOut(this.time/2);
     }
      
    }

    ====================调用方法:

    new Toast({context:$('body'),message:'Toast效果显示'}).show();

  • 相关阅读:
    Python如何爬取淘宝MM呢?教你一招
    Python爬虫实战之如何爬取百度贴吧帖子?案例详解
    SpringBoot定时任务如何正确运用?案例详解
    JS数组之重排序方法
    JS数组之栈和队列
    JS数组之转换方法
    计算机相关推荐教程
    多维数组
    重新认识变量和数组
    数组
  • 原文地址:https://www.cnblogs.com/marsli/p/4011773.html
Copyright © 2011-2022 走看看