js 自定义类Android吐司提示框
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吐司提示框相关推荐
- android自定义吐司通知,IOS 仿Android吐司提示框的实例(分享)
直接上代码 #import @interface ShowToastView : UIView +(void)showToastView:(UIView *)uiview WithMessage:(N ...
- Toast类实现消息提示框
Toast类实现消息提示框的方式有两种: 使用静态方法makeText()方法 以下面那个为例吧,第一个参数是一个上下文对象,第二个参数是要显示的数据,第三个参数是要显示数据的时长. 我们来看看他低层 ...
- 详解-Android各种提示框
首先我们来看看效果图 1.简单的消息提示框 // 简单消息提示框 private void showExitDialog01(){ new AlertDialog.Builder(this) .set ...
- ANDROID各种提示框
Android开发中我们经常需要用到提示框,以便更好的和用户进行交互 首先我们来看看效果图 实现这个其实很简单,Android的API已经为我们提供了一个提示框类AlertDialog,我们实现的时候 ...
- android Dialog提示框。单选项dialog,多选项dialog
private void showNormalDialogOne() {/* @setIcon 设置对话框图标* @setTitle 设置对话框标题* @setMessage 设置对话框消息提示* s ...
- Android消息提示框及CheckBox组件
目录 一.Toast(消息提示框) 1.创建显示普通文本的Toast 2.创建显示带图片的Toast 二.CheckBox组件 1.在CheckBox在XML文件中的基本语法 2.CheckBox 选 ...
- Android消息提示框
Toast(吐丝框) 1.1 Toast是Android中的一种简易的消息提示框 1.2 使用这个类的最简单的方法是调用静态方法构造您所需要的一切,并返回一个新的Toast对象. Toast toas ...
- JS实现跟随鼠标的提示框
跟随鼠标的提示框 鼠标移入到某个关键词就会出现提示框并且在关键词范围内跟随鼠标的移动是怎么实现的呢? 下面来看代码 简单的html和css <body><a href="# ...
- JS的三种消息提示框alert confirm prompt
首先来看看alert的效果: 代码为: $(function(){$("#quit").click(quit); })function quit(){alert("消息提 ...
最新文章
- PIG 中COGROUP中的空值验证
- ARM 之十二 Cortex-M 内核异常处理、异常定位方法、在线调试、Keil MDK-ARM 的使用
- MS SQL-Server快捷键
- 超级详细的Spring Boot 注解总结
- oracle数据库表excel文件位置,Excel数据导入到oracle数据库表方法
- 机器学习基础(四十七)—— 统计
- css-布局1-基本属性
- 性能测试负载模型(八)
- Office Open XML 文档格式(转)
- 以pdf转cad为例,所有格式之间任意转换
- OC load 和 initialize 方法
- 算法策略 | MACD跨周期短线交易策略开发(股指+商品双版)
- 下载json文件,解决浏览器对JSON文件链接直接打开问题
- 修改mysql中自增列的起始值
- 【软考】系统集成项目管理工程师(十四)项目合同管理
- java 序列是什么意思_java 中的序列化是什么意思?有什么好处?
- 魔兽世界任务制作教学
- 二分查找(Binary Search)需要注意的问题,以及在数据库内核中的实现
- 智能视频分析网络IP摄像头在安防行业都有哪些优势?
- 为什么我坚持一直使用AutoCAD 2007?(页末附CAD2007及天正单机版下载地址)
热门文章
- vue对象拼接_vue 俩个数组对象合并成一个
- python有趣的面试题_python面试题目
- 适合利用计算机模拟的是,计算机模拟在数学建模中的应用
- pipeline python,Python-什么是sklearn.pipeline.Pipeline?
- 超时空机战服务器配置信息错误,超时空机战熔炉篇FAQ教你如何合理的使用熔炉...
- 【人工智能初级系列(一)】科学计算库 Numpy
- oracle的连接函数,Oracle各种连接函数总结
- google账号解除游戏绑定_附方法!关于物联卡手机号的绑定与解绑
- 计算机语言 angela,Angela
- pat 乙级 1029 旧键盘(C++)