輕量級 JS ToolTip提示效果
更新時間:2010年07月20日 01:04:22 作者:
JS ToolTip提示效果,喜歡的朋友可以參考下。
鼠標經(jīng)過出現(xiàn)的提示效果,比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、構(gòu)建新的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調(diào)用:
<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(){}, //移除提示綁定
這兩行,可以用動態(tài)綁定事件完成,因為項目里面用不著,所以暫時沒加
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、構(gòu)建新的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調(diào)用:
復制代碼 代碼如下:
<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(){}, //移除提示綁定
這兩行,可以用動態(tài)綁定事件完成,因為項目里面用不著,所以暫時沒加
相關文章
JSChart輕量級圖形報表工具(內(nèi)置函數(shù)中文參考)
JSChart是一個輕量級的在線圖表生成工具,本身十分小巧,簡單易用,相對來講功能也不是特別強大,但是對于一些要求不高的應用來講已經(jīng)夠用了,最近兩天在做一個監(jiān)控系統(tǒng),想到了它。2010-10-10javascript實現(xiàn)圖片左右滾動效果【可自動滾動,有左右按鈕】
這篇文章主要介紹了javascript實現(xiàn)圖片左右滾動效果,可實現(xiàn)自動滾動,帶有左右按鈕功能,基于插件scrollPic.js實現(xiàn),附帶了相應的demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09基于JavaScript實現(xiàn)通用tab選項卡(通用性強)
選項卡在大量的網(wǎng)站都有應用,雖然形式各有不同,但是索要達成的目的都是一樣的,一般都是為了進行分類或者節(jié)省網(wǎng)頁空間只用,算是一件利器,下面就是一個選項卡的代碼實例,通用性很強,下面就和大家分享一下2016-01-01