javascript tips提示框组件实现代码


Posted in Javascript onNovember 19, 2010

tip.js

function tips(obj,tag){ 
var tip = document.createElement('div'),arg= arguments[2],left,top; //创建tipbox 
var bodywid= document.documentElement.clientWidth; //这里也可以替换为容器的宽度$(id).outerWidth(); 
var abs = obj.getElementsByTagName(tag); 
tip.className="tip_bd"; 
obj.appendChild(tip); 
for(var i=0,len=abs.length;i<len;i++){ 
hover(abs[i],function(){ 
var content = arg||this.getAttribute('tip'),text; 
left = position(this).left,top=position(this).top; 
content?tip.innerHTML=content:tip.innerHTML="暂无内容!"; 
if(left+parseInt(getStyle(tip,'width'))>bodywid) //判断当前位置是否超过最大宽度 
text='right:'+(bodywid-left)+'px;left:auto;'; 
else 
text='left:'+(left+this.offsetWidth)+'px;'; 
text +='top:'+(top+this.offsetHeight)+'px;'; 
tip.style.cssText=text; 
text=''; 
tip.style.display='block'; 
},function(){ 
tip.style.display='none'; 
}); 
} 
} 
function hover(el,fnOver, fnOut){//鼠标滑过函数 
addEvent(el,'mouseover',fnOver); 
addEvent(el,'mouseout',fnOut); 
} 
function addEvent(el,type,fn){ //绑定事件 
if(el.attachEvent) { 
el['e'+type+fn] = fn; //IE下拷贝元素引用,使this指向el对象而不是window 
el[type+fn] = function(){el['e'+type+fn](window.event);} 
el.attachEvent('on'+type, el[type+fn]); 
}else 
el.addEventListener(type, fn, false); 
} 
function position(el){//dom节点的绝对位置 
if(el&&el.nodeType == 1) 
return {'left':el.getBoundingClientRect().left+document.documentElement.scrollLeft,'top':el.getBoundingClientRect().top+document.documentElement.scrollTop}; 
} 
function getStyle(obj,styleName){//获取当前样式属性 
if(obj.currentStyle)//ie 
return obj.currentStyle[styleName]; 
else{ //ff 
var $arr=obj.ownerDocument.defaultView.getComputedStyle(obj, null); 
return $arr[styleName]; 
} 
} 
tips(document.getElementById('tips'),'a');

一个简单的类似title的提示效果,但现实内容可以很丰富,以上js另存为tip.js,下面是使用的demo。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> <head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
<meta name="copyright" content="" /> 
<meta name="keywords" content="" /> 
<meta name="description" content="" /> 
<title>提示信息框</title> 
<link rel="stylesheet" type="text/css" href="style/css/tip.css" /> 
<style> 
#wrap{line-height:22px;padding:20px;} 
#tips .tip_bd{border:1px solid green;width:100px;position:absolute;background:#fff;z-index:9999;text-align:center;display:none;} 
#tips{border:1px solid #ccc;padding:0 10px;} 
</style> 
</head> 
<body> 
<h1>提示信息框</h1> 
<br/><br/><br/><br/> 
<div id="tips"> 
阅读了<a href="#" tip="三水点靠木">三水点靠木</a>今天发布的IT文章《30个提高Web程序执行效率的好经验》,这30条准则对我们web开发是非常有用的,不则是知其然而不知其所<a href="#" tip="三水点靠木2">三水点靠木</a>以然。下面是我对这些准则的理解和分析,有些有关JS性能的准则,我也测试了它们<a href="#">三水点靠木</a>的差异,大家可以下载DEMO页面,如有理解不正确的地方,请大家指教。 
</div> 
</body> 
<script type="text/javascript" src="tips.js"></script> 
</html>
Javascript 相关文章推荐
js中的scroll和offset 使用比较的实例与分析
Sep 29 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
javascript通过元素id和name直接取得元素的方法
Apr 28 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
vue时间格式化实例代码
Jun 13 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
javascript将非数值转换为数值
Sep 13 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 12 Javascript
突发奇想的一个jquery插件
Nov 19 #Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 #Javascript
基于jQuery的获得各种控件Value的方法
Nov 19 #Javascript
基于jquery实现的可以编辑选择的下拉框的代码
Nov 19 #Javascript
使用jQuery的将桌面应用程序引入浏览器
Nov 19 #Javascript
DIV菜单层实现代码
Nov 19 #Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 #Javascript
You might like
php和javascript之间变量的传递实现代码
2012/12/19 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
php中JSON的使用方法
2015/04/30 PHP
PHP常用技巧汇总
2016/03/04 PHP
php实现用户登陆简单实例
2017/04/04 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
许愿墙中用到的函数
2006/10/07 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
详解webpack babel的配置
2018/01/09 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
一行JavaScript代码如何实现瀑布流布局
2020/12/11 Javascript
使用python统计文件行数示例分享
2014/02/21 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
python爬虫容易学吗
2020/06/02 Python
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
班班通项目实施方案
2014/02/25 职场文书
教师节促销方案
2014/03/22 职场文书
房屋转让协议书范本
2014/04/11 职场文书
体育之星事迹材料
2014/05/11 职场文书
高中运动会广播稿
2014/09/16 职场文书
女性健康讲座主持词
2015/07/04 职场文书
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python
关于Redis的主从复制及哨兵问题
2022/06/16 Redis