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

?

轉載于:https://www.cnblogs.com/potatog/p/9184701.html

總結

以上是生活随笔為你收集整理的js 自定义类Android吐司提示框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。