javascript tips提示框组件实现代码

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">

　　<head>

　　<title>提示信息框</title>

　　<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>

　　阅读了<a href="#" tip="管理资源吧">管理资源吧</a>今天发布的IT文章《30个提高Web程序执行效率的好经验》，这30条准则对我们web开发是非常有用的，不则是知其然而不知其所<a href="#" tip="管理资源吧2">管理资源吧</a>以然。下面是我对这些准则的理解和分析，有些有关JS性能的准则，我也测试了它们<a href="#">管理资源吧</a>的差异，大家可以下载DEMO页面，如有理解不正确的地方，请大家指教。

　　</div>

　　</body>

　　</html>

教程首页更多教程