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判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
一个简单的jquery进度条示例
Apr 28 Javascript
js实现下拉框选择要显示图片的方法
Feb 16 Javascript
JavaScript数组常用方法
Mar 02 Javascript
JavaScript实现动画打开半透明提示层的方法
Apr 21 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
Vue动态实现评分效果
May 24 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
layui select获取自定义属性方法
Aug 15 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
yii2简单使用less代替css示例
2017/03/10 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
Python生成随机MAC地址
2015/03/10 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
对Python 内建函数和保留字详解
2018/10/15 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
Python 编程速成(推荐)
2019/04/15 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
JAVA程序员自荐书
2014/01/30 职场文书
审计班子对照检查材料
2014/08/27 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
2015年女生节活动总结
2015/02/27 职场文书
工作时间调整通知
2015/04/24 职场文书
刑事起诉书范文
2015/05/19 职场文书
运动会三级跳加油稿
2015/07/21 职场文书