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"> <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 函数参数限制说明

测试结果: safari 下是65535个.即 ushort 来存储(2字节 16个1).更多的则忽略. 其他浏览器至少是int.MaxValue .据说FireFox 甚至是用long 来维护实参数. 其他浏览器也许是int 或者可能是uint .这个就不管了. 毕竟>>>详细阅读

本文标题：javascript tips提示框组件实现代码

地址：http://www.17bianji.com/kaifa2/JS/25365.html

1/2 1