管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

轻量级 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>

　　使用效果：

轻量级 JS ToolTip提示效果

　　上面的$("id")作用等价于document.getElementById("id")

　　AttachTip:function(){}, //添加提示绑定

　　DetachTip:function(){}, //移除提示绑定

　　这两行，可以用动态绑定事件完成，因为项目里面用不着，所以暂时没加

教程首页 更多教程