新鲜出炉的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 break指定标签打破多层循环示例
Jan 20 Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
JS实现鼠标框选效果完整实例
Jun 20 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
详解Angular CLI + Electron 开发环境搭建
Jul 20 Javascript
Three.js基础学习教程
Nov 16 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 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
基于MySQL分区性能的详细介绍
2013/05/02 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
Js sort排序使用方法
2011/10/17 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
决策树的python实现方法
2014/11/18 Python
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
Python命令行click参数用法解析
2019/12/19 Python
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
副厂长岗位职责
2014/02/02 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
入学证明
2015/06/23 职场文书
感恩的心主题班会
2015/08/12 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
详解MySQL的半同步
2021/04/22 MySQL
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
MySQL普通表如何转换成分区表
2022/05/30 MySQL
JavaScript实现音乐播放器
2022/08/14 Javascript