js 自定义类Android吐司提示框

(function(){

    var mouseX = 0;

    var mouseY = 0;

    //定义一个全局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.mouseX = mouseX;

        this.mouseY = mouseY;

        this.zindex = 999;

        this.position = positon || "mouse";

        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";

        

        

        //背景色

        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);

        if(this.position == "mouse")

        {

            this.ToastDom.style.top =  this.mouseY + 10 +  "px";

            this.ToastDom.style.left =  this.mouseX + 10 + "px";

        }

        else if(this.position == "top")

        {

            this.ToastDom.style.top = "25px";

            this.ToastDom.style.left = "50%";

            this.ToastDom.style.marginLeft = -(getStyle(this.ToastDom,"width") / 2) +"px";

        }

        else

        {

            this.ToastDom.style.bottom = "25px";

            this.ToastDom.style.left = "50%";

            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]);

        }

    }

    //监听鼠标移动事件

    document.onmousemove = function(e){

        e = e || window.event;

        mouseX = e.pageX;

        mouseY = e.pageY;

    }

    

})();

<!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>