新鲜出炉的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 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 Javascript
给js文件传参数(详解)
Jul 13 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
微信小程序实现倒计时60s获取验证码
Apr 17 Javascript
JavaScript屏蔽Backspace键的实现代码
Nov 02 Javascript
layui 给数据表格加序号的方法
Aug 20 Javascript
详解关于React-Router4.0跳转不置顶解决方案
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
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
JavaScript中的细节分析
2012/06/30 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
[52:20]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
python文件比较示例分享
2014/01/10 Python
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
Python实现抓取城市的PM2.5浓度和排名
2015/03/19 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
tensorflow 环境变量设置方式
2020/02/06 Python
python shapely.geometry.polygon任意两个四边形的IOU计算实例
2020/04/12 Python
python爬虫工具例举说明
2020/11/30 Python
求职信模版
2013/11/30 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
护理专业自荐书
2014/06/04 职场文书
三好生演讲稿
2014/09/12 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
端午节活动总结报告
2015/02/11 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电