新鲜出炉的js tips提示效果


Posted in Javascript onApril 03, 2011

兼容性已经测过:IE6\IE7\IE8\FF3\CHROME10

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<body> 
<br><br><br><br><br><br><br><br> 
<input id='test'> 
<br><br><br><br><br><br><br><br> 
<a href='#' id='test2' onmouseover="tips.show('普通链接或按钮提示-灰色-鼠标离开消失-300像素', 'test2', null, '#000000', 300)" onmouseout="tips.hidden('test2')">普通链接或按钮提示</a> 
<script> 
//提示消息类 
var tips = { 
temp : {}, 
/*** 
* 弹出提示 
* 
* @param string msg 提示文字内容 
* @param string id 要弹出提示的目标对象的id,如果id错误/null/false/0则主窗口弹出 
* @param int time 定时消失时间毫秒数,如果为null/0/false则不定时 
* @param string color 提示内容的背景颜色格式为#000000 
* @param int width 提示窗宽度,默认300 
*/ 
show : function(msg, id, time, color, width) 
{ 
var target = this._get(id); 
if(!target) { id = 'window'; } 
//如果弹出过则移除重新弹出 
if(this._get(id+'_tips')) { this.remove(id); } 
//设置默认值 
msg = msg || 'error'; 
color = color || '#ea0000'; 
width = width || 300; 
time = time ? parseInt(time) : false; 
if(id=='window') { 
var y = document.body.clientHeight/2+document.body.scrollTop; 
var x = (document.body.clientWidth-width)/2; 
var textAlign = 'center', fontSize = '15',fontWeight = 'bold'; 
} else { 
//获取对象坐标信息 
for(var y=0,x=0; target!=null; y+=target.offsetTop, x+=target.offsetLeft, target=target.offsetParent); 
var textAlign = 'left', fontSize = '12',fontWeight = 'normal'; 
} 
//弹出提示 
var tipsDiv = this._create({display:'block',position:'absolute',zIndex:'1001',width:(width-2)+'px',left:(x+1)+'px',padding:'5px',color:'#ffffff',fontSize:fontSize+'px',backgroundColor:color,textAlign:textAlign,fontWeight:fontWeight,filter:'Alpha(Opacity=50)',opacity:'0.7'}, {id:id+'_text', innerHTML:msg, onclick:function(){tips.hidden(id);}}); 
document.body.appendChild(tipsDiv); 
tipsDiv.style.top = (y-tipsDiv.offsetHeight-12)+'px'; 
document.body.appendChild(this._create({display:'block',position:'absolute',zIndex:'1000',width:(width+10)+'px',height:(tipsDiv.offsetHeight-2)+'px',left:x+'px',top:(y-tipsDiv.offsetHeight-11)+'px',backgroundColor:color,filter:'Alpha(Opacity=50)',opacity:'0.7'}, {id:id+'_bg'})); 
if(id!='window') { 
var arrow = this._create({display:'block',position:'absolute',overflow:'hidden',zIndex:'999',width:'20px',height:'10px',left:(x+20)+'px',top:(y-13)+'px'}, {id:id+'_arrow'}); 
arrow.appendChild(this._create({display:'block',overflow:'hidden',width:'0px',height:'10px',borderTop:'10px solid '+color,borderRight:'10px solid #fff', borderLeft:'10px solid #fff',filter:'Alpha(Opacity=70)',opacity:'0.8'})); 
document.body.appendChild(arrow); 
} 
//标记已经弹出 
this.temp[id] = id; 
//如果定时关闭 
if(time) { setTimeout(function(){tips.hidden(id);}, time) } 
return id; 
}, 
/*** 
* 隐藏提示 
* 
* @param string id 要隐藏提示的id,如果要隐藏主窗口提示id为window,如果要隐藏所有提示id为空即可 
*/ 
hidden : function(id) 
{ 
if(!id) { for(var i in this.temp) { this.hidden(i); } return; } 
var t = this._get(id+'_text'), d = this._get(id+'_bg'), a = this._get(id+'_arrow'); 
if(t) { t.parentNode.removeChild(t); } 
if(d) { d.parentNode.removeChild(d); } 
if(a) { a.parentNode.removeChild(a); } 
}, 
_create : function(set, attr) 
{ 
var obj = document.createElement('div'); 
for(var i in set) { obj.style[i] = set[i]; } 
for(var i in attr) { obj[i] = attr[i]; } 
return obj; 
}, 
_get : function(id) 
{ 
return document.getElementById(id); 
} 
}; 

window.onload = function(){ 
tips.show('主窗口提示-绿色-不定时-300像素', null, null, '#009900', 300); 
tips.show('表单报错提示-红色-3000毫秒消失-250像素', 'test', 3000, '#ea0000', 250); 
} 
document.onclick = function(){ 
tips.hidden(); 
} 
</script>
Javascript 相关文章推荐
在Javascript中定义对象类别
Dec 22 Javascript
javascript css styleFloat和cssFloat
Mar 15 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
jquery 笔记 事件
Nov 02 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
angularJS结合canvas画图例子
Feb 09 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
Dec 08 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
Mar 01 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 Javascript
使用Firebug对js进行断点调试的图文方法
Apr 02 #Javascript
dreamweaver 安装Jquery智能提示
Apr 02 #Javascript
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 #Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 #Javascript
JQuery文本框高亮显示插件代码
Apr 02 #Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 #Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 #Javascript
You might like
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
桌面中心(二)数据库写入
2006/10/09 PHP
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
简单实用的.net DataTable导出Execl
2013/10/28 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
为Extjs加加速(javascript加速)
2010/08/19 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
举例讲解Python中的死锁、可重入锁和互斥锁
2015/11/05 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
super()与this()的区别
2016/01/17 面试题
资深生产主管自我评价
2013/09/22 职场文书
测试工程师岗位职责
2013/11/28 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
考博专家推荐信
2014/05/10 职场文书
千与千寻观后感
2015/06/04 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书
2016教师节感恩话语
2015/12/09 职场文书