轻量级 JS ToolTip提示效果

鼠标经过出现的提示效果，比title更漂亮，可订制。JS：复制代码代码如下: //---------------------------tooltip效果 start----------------------------------- //获取某个html元素的定位 function GetPos(obj){ var pos=new Object(); pos.x=obj.offsetLeft; pos.y=obj.offsetTop; while(obj=obj.offsetParent){ pos.x+=obj.offsetLeft; pos.y+=obj.offsetTop; } return pos; }; //提示工具 var ToolTip={ _tipPanel:null, Init:function(){ if(null==this._tipPanel){ var tempDiv=document.createElement("div"); document.body.insertBefore(tempDiv, document.body.childNodes[0]); tempDiv.id="tipPanel"; tempDiv.style.display="none"; tempDiv.style.position="absolute"; tempDiv.style.zIndex="999"; } }, AttachTip:function(){}, //添加提示绑定 DetachTip:function(){}, //移除提示绑定 ShowTip:function(oTarget){ if($("tipPanel")==null) return; /*操作流程 *1、构建新的html片段 *2、设置提示框新位置 *3、显示提示框 */ //1. var tempStr=""; //html片段 if(arguments.length>1){ for(var i=1;i<arguments.length;i++){ tempStr+="<p>"+arguments[i]+"</p>"; } } $("tipPanel").innerHTML=tempStr; //2. var pos=GetPos(oTarget); $("tipPanel").style.left=(oTarget.offsetWidth/2+pos.x)+"px"; $("tipPanel").style.top=(oTarget.offsetHeight+pos.y)+"px"; //3. $("tipPanel").style.display=""; }, HideTip:function(){ if($("tipPanel")==null) return; $("tipPanel").style.display="none"; } }; //---------------------------tooltip效果 end----------------------------------- CSS：复制代码代码如下: #tipPanel{ background:white; padding:6px 8px; width:300px; border:solid 4px #09c; font-size:14px; color:#555;} #tipPanel p{ margin:0px;} #tipPanel b{ color:red; font-size:14px;} HTML调用：复制代码代码如下: <body> <input type="button" value="hover me" onmouseover='ToolTip.ShowTip(this,"<b>日期：</b>2010-7-19");' onmouseout='ToolTip.HideTip();' style="margin:200px 100px;" /> </body> <script type="text/javascript"> //initialize tooltip control ToolTip.Init(); </script> 使用效果：上面的$("id")作用等价于document.getElementById("id") AttachTip:function(){}, //添加提示绑定 DetachTip:function(){}, //移除提示绑定这两行，可以用动态绑定事件完成，因为项目里面用不着，所以暂时没加

　　推荐阅读

　　javascript 循环读取JSON数据的代码

服务端后台返回到客户端的JSON格式字符串： var str = '[{"uname":"王强","day":"2010/06/17"},{"uname":"王海云","day":"2010/06/11"}]'; 　　我们把它转换成JSON对象:var jsonList=eval("("+str+")");这时候如果>>>详细阅读

本文标题：轻量级 JS ToolTip提示效果

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

1/2 1