js 自定义类Android吐司提示框

(function(){
    //定义一个全局toaslist用来存在新建的吐司
    var toastLsit = [];
    window.Toast = function(content,duration,positon)
    {
        return new Toast(content,duration,positon);
    }
    
    function Toast(content,duration,positon)
    {
        //显示的内容
        this.content = content || "注意";
        this.duration = duration || 500;
        this.ToastDom = null;
        this.ToastDomOpacity = 100;
        this.toastTimer = false;
        this.toastTimeOut = false;
        this.zindex = 999;
        this.position = positon || "top";
        this.initToastDom();
        this.bindEvent();
        this.hiddenToast();
        toastLsit.push(this);
    }
    
    //绑定事件，缓慢变透明，然后移除，如果鼠标hover透明度又恢复
    Toast.prototype.bindEvent  = function(){
        
        var _this = this;
        
        this.ToastDom.onselectstart = function(){return false;}
        
        this.ToastDom.onmouseover = function(){
            _this.zindex = 999;
            _this.ToastDomOpacity = 100;
            _this.ToastDom.style.filter = 'alpha(opacity:'+ _this.ToastDomOpacity +')';
            _this.ToastDom.style.opacity = _this.ToastDomOpacity/100;
            _this.ToastDom.style.zIndex = _this.zIndex;
            clearInterval(_this.toastTimer);
            clearTimeout(_this.toastTimeOut);
        }
        
        
        this.ToastDom.onmouseout = function(){
            _this.hiddenToast();
        }
        
    };
    Toast.prototype.hiddenToast = function(){
        clearTimeout(this.toastTimeOut);
        var _this = this;
        _this.toastTimeOut = setTimeout(function(){
            _this.toastTimer = setInterval(
            function(){
                _this.ToastDomOpacity --;
                _this.zIndex --;
                _this.ToastDom.style.zIndex = _this.zIndex;
                _this.ToastDom.style.filter = 'alpha(opacity:'+ _this.ToastDomOpacity +')'; 
                _this.ToastDom.style.opacity = _this.ToastDomOpacity/100;
                if(_this.ToastDomOpacity <= 0)
                {
                    clearInterval(_this.toastTimer);
                    document.body.removeChild(_this.ToastDom);
                    toastLsit.shift();
                }
            },10);
        },800);
    }
    //初始化布局
    Toast.prototype.initToastDom = function(){
        
        //新建一个DIV
        this.ToastDom = document.createElement("div");
        this.ToastDom.innerHTML = this.content;
        //然后给这个元素布局
        //这个元素的位置应该是  浏览器的最底部  居中的位置，并且在所有元素的顶部 且不能影响其他元素的布局
        this.ToastDom.style.position = "fixed";
        if(this.position == "top")
        {
            this.ToastDom.style.top = "25px";
        }
        else
        {
            this.ToastDom.style.bottom = "25px";
        }
        this.ToastDom.style.left = "50%";
        //背景色
        this.ToastDom .style.backgroundColor = "#000";
        this.ToastDom .style.color = "#fff";
        this.ToastDom .style.minWidth = "200px";
        this.ToastDom .style.textAlign = "center";
        this.ToastDom .style.padding = "10px";
        this.ToastDom .style.borderRadius = "5px";
        this.ToastDom .style.cursor = "pointer";
        //只有先上树之后才有具体的宽高
        document.body.appendChild(this.ToastDom);
        this.ToastDom.style.marginLeft = -(getStyle(this.ToastDom,"width") / 2) +"px";
    }
    function getStyle(obj,name)
    {
        if(obj.currentStyle)
        {
            return parseFloat(obj.currentStyle[name]);
        }
        else
        {
            return parseFloat(getComputedStyle(obj)[name]);
        }
    }
})();

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>模拟手机吐司</title>
        <script type="text/javascript" src="js/Toast.js" ></script>
    </head>
    <body>
        
        <input type="text" />
        <button>吐司</button>
        
        <div style="height:1500px;">
            
            
        </div>
        <script>
            
            document.getElementsByTagName("button")[0].onclick = function(){
                Toast(document.getElementsByTagName("input")[0].value);
                
                
            }
            
            
            
            
        </script>
    </body>
</html>

js 自定义类Android吐司提示框

猜你喜欢