快捷導(dǎo)航

poshytip 基于jquery的插件主要用于顯示微博人的圖像和鼠標(biāo)提示等

更新時(shí)間：2012年10月12日 12:20:24 作者：

分享一個(gè)jquery插件-主要用于顯示微博人的圖像和鼠標(biāo)提示等poshytip

這種效果常常有兩個(gè)需求

1 鼠標(biāo)移動(dòng)到人圖像上時(shí)，顯示這個(gè)人的信息，鼠標(biāo)離開(kāi)人圖像時(shí)隱藏這個(gè)人的相關(guān)信息
2當(dāng)鼠標(biāo)移動(dòng)到到人的信息塊時(shí)，信息依然顯示，當(dāng)鼠標(biāo)離開(kāi)人的信息塊時(shí)，信息隱藏
3 必須是自動(dòng)關(guān)閉而不是手動(dòng)關(guān)閉

通常第一個(gè)比較容易滿足，但是第一個(gè)在遇到事件冒泡時(shí)，搞起來(lái)也比較麻煩，
這個(gè)時(shí)候在遇到第二個(gè)需求，就很難搞定了，
做微博APP時(shí)，常常要顯示人的個(gè)人信息，想吧新浪或騰訊的那個(gè)js弄過(guò)來(lái)吧，搞了半天沒(méi)找見(jiàn)是那一段js，
博客園里面推薦的一堆tooltip 均不能滿足3個(gè)要求，

找了老半天，在網(wǎng)上找了一個(gè)能用，

地址：http://demo.jb51.net/js/2011/poshytip/demo/index.html
下載地址 http://chabaoo.cn/jiaoben/38747.html
不過(guò)這個(gè)js為了降低服務(wù)器壓力，在密集使用時(shí)，會(huì)創(chuàng)建很多div，我優(yōu)化了一點(diǎn)點(diǎn)，
代碼如下

復(fù)制代碼代碼如下:

 
$.Poshytip = function(elm, options) { 
if( $(elm).data('Poshytipkeyint')!="1") 
{ 
$(elm).data('Poshytipkeyint','1') 
} 
else 
{ 
return; 
} 
this.$elm = $(elm); 
this.opts = $.extend({}, $.fn.poshytip.defaults, options); 

this.$tip = $(['<div class="',this.opts.className,'">', 
'<div class="tip-inner tip-bg-image"></div>', 
'<div class="tip-arrow tip-arrow-top tip-arrow-right tip-arrow-bottom tip-arrow-left"></div>', 
'</div>'].join('')).appendTo(document.body); 

this.$arrow = this.$tip.find('div.tip-arrow'); 
this.$inner = this.$tip.find('div.tip-inner'); 
this.disabled = false; 
this.content = null; 
this.init(); 
}; 