ToolTips JQEURY插件之簡(jiǎn)潔小提示框效果
更新時(shí)間：2011年11月19日 17:25:45 作者：
本來(lái)不想寫(xiě)成ＪＱ的插件的，不過(guò)貌似不用ＪＱ的話，引用起來(lái)沒(méi)有這么方便。以前也寫(xiě)過(guò)一些小小的ＪＳ方法，但是寫(xiě)ＪＱ插件是第一次
本來(lái)是想用一些現(xiàn)成的插件的，找了幾個(gè)都比較復(fù)雜，我就想實(shí)現(xiàn)一個(gè)小小的效果，并不需要太復(fù)雜，所以最終打算自己寫(xiě)一個(gè)！
實(shí)現(xiàn)效果：鼠標(biāo)放到文字上面，出現(xiàn)小提示框！
效果截圖：
(function($){
$.fn.JNToolTips=function(){
var div = document.createElement("div");
div.style.cssText = 'width:300px; line-height:25px; border:solid 1px #F3A007; background-color:#FBE6BD; padding:5px 10px; font-size:12px;position:absolute'
div.onclick=function(){$(div).remove();};
$(this).mouseover(function(e){
if(!e){e=window.event;}
div.innerHTML= $(this).attr("title");
$(this).attr("title","");
var doc = document.documentElement ? document.documentElement : document.body;
div.style.left=(e.clientX+doc.scrollLeft + 5)+"px";
div.style.top=(e.clientY+doc.scrollTop + 5)+"px";
document.body.appendChild(div);
}).mouseout(function(){
$(this).attr("title",div.innerHTML);
$(div).remove();
});
}
})(jQuery);
使用方法：
$(document).ready(function(){
$("a").JNToolTips();
});
實(shí)現(xiàn)效果：鼠標(biāo)放到文字上面，出現(xiàn)小提示框！
效果截圖：
測(cè)試結(jié)果：火狐，ＩＥ６/７/８下面通過(guò)
說(shuō)明，沒(méi)有做參數(shù)定制，以后可能會(huì)完善，大家要改顯示效果的話，直接調(diào)整ＪＳ里面的ＣＳＳ樣式即可！歡迎高手指教！
代碼
復(fù)制代碼 代碼如下:
(function($){
$.fn.JNToolTips=function(){
var div = document.createElement("div");
div.style.cssText = 'width:300px; line-height:25px; border:solid 1px #F3A007; background-color:#FBE6BD; padding:5px 10px; font-size:12px;position:absolute'
div.onclick=function(){$(div).remove();};
$(this).mouseover(function(e){
if(!e){e=window.event;}
div.innerHTML= $(this).attr("title");
$(this).attr("title","");
var doc = document.documentElement ? document.documentElement : document.body;
div.style.left=(e.clientX+doc.scrollLeft + 5)+"px";
div.style.top=(e.clientY+doc.scrollTop + 5)+"px";
document.body.appendChild(div);
}).mouseout(function(){
$(this).attr("title",div.innerHTML);
$(div).remove();
});
}
})(jQuery);
使用方法：
復(fù)制代碼 代碼如下:
$(document).ready(function(){
$("a").JNToolTips();
});
相關(guān)文章
20款非常優(yōu)秀的 jQuery 工具提示插件 推薦
工具提示（Tooltip）在網(wǎng)站中的一個(gè)小功能，但卻有很重要的作用，常用于顯示一些溫馨的提示信息。如果網(wǎng)站中的工具提示功能做得非常有創(chuàng)意的話能夠加深用戶對(duì)網(wǎng)站印象2012-07-07
jValidate 基于jQuery的表單驗(yàn)證插件
網(wǎng)上基于jQuery的表單驗(yàn)證插件已有很多，但是這個(gè)輪子我還是繼續(xù)做一個(gè)，因?yàn)檫@個(gè)表單驗(yàn)證插件是從我以前的個(gè)人JS框架移值過(guò)來(lái)的（我已慢慢投入jQuery的懷抱），并且它的驗(yàn)證規(guī)則書(shū)寫(xiě)方式也許會(huì)讓你眼前一亮。2009-12-12
這篇文章主要為大家詳細(xì)介紹了Jquery Easyui菜單組件Menu的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
用jquery為ul下的li依次設(shè)置樣式的代碼，主要是利用了first,next方法。2011-03-03
編寫(xiě)高效jQuery代碼的4個(gè)原則和5個(gè)技巧
有了JQuery對(duì)JS的整合和封裝，它讓頁(yè)面操作更加的隨心所欲，所以只有遵循良好的規(guī)范才會(huì)讓代碼更高效，更健壯。以下是我對(duì)如何高效操作JQuery的一些拙見(jiàn)，望指正！2014-04-04
最近看完了添加事件和刪除事件的核心方法，忍不住想把jQuery的事件模塊摳出來(lái)。jQuery的代碼是非常內(nèi)聚的，一環(huán)套一環(huán)。想獨(dú)立出來(lái)不容易。2011-08-08
這篇文章主要為大家詳細(xì)介紹了jquery單擊文字或圖片內(nèi)容放大并居中顯示，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
jQuery DataTables插件自定義Ajax分頁(yè)實(shí)例解析
這篇文章主要為大家詳細(xì)介紹了jQuery DataTables插件自定義Ajax分頁(yè)的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
jquery實(shí)現(xiàn)文字由下到上循環(huán)滾動(dòng)的實(shí)例代碼
這篇文章介紹了jquery實(shí)現(xiàn)文字由下到上循環(huán)滾動(dòng)的實(shí)例代碼，有需要的朋友可以參考一下2013-08-08
jQuery實(shí)現(xiàn)點(diǎn)擊DIV同時(shí)點(diǎn)擊CheckBox,并為DIV上背景色的實(shí)例
下面小編就為大家分享一篇jQuery實(shí)現(xiàn)點(diǎn)擊DIV同時(shí)點(diǎn)擊CheckBox,并為DIV上背景色的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12