新鲜出炉的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 清空form表单中某种元素的值
Dec 26 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
Jan 11 Javascript
ajax处理php返回json数据的实例代码
Jan 24 Javascript
js实现的类似于asp数据字典的数据类型代码实例
Sep 03 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
JavaScript中this详解
Sep 01 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
利用JS判断元素是否为数组的方法示例
Jan 08 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
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
Python常用库大全及简要说明
2020/01/17 Python
Python如何实现定时器功能
2020/05/28 Python
python程序需要编译吗
2020/06/19 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
计算机网络专业推荐信
2013/11/24 职场文书
幼儿园教师备课制度
2014/01/12 职场文书
母婴店促销方案
2014/03/05 职场文书
大学毕业寄语大全
2014/04/10 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
医药销售自我评价200字
2014/09/11 职场文书
党的作风建设心得体会
2014/10/22 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
MySQL导致索引失效的几种情况
2022/06/25 MySQL