ToolTips JQEURY插件之簡潔小提示框效果
更新時間：2011年11月19日 17:25:45 作者：
本來不想寫成ＪＱ的插件的，不過貌似不用ＪＱ的話，引用起來沒有這么方便。以前也寫過一些小小的ＪＳ方法，但是寫ＪＱ插件是第一次
本來是想用一些現(xiàn)成的插件的，找了幾個都比較復(fù)雜，我就想實現(xiàn)一個小小的效果，并不需要太復(fù)雜，所以最終打算自己寫一個！
實現(xiàn)效果：鼠標放到文字上面，出現(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();
});
實現(xiàn)效果：鼠標放到文字上面，出現(xiàn)小提示框！
效果截圖：
測試結(jié)果：火狐，ＩＥ６/７/８下面通過
說明，沒有做參數(shù)定制，以后可能會完善，大家要改顯示效果的話，直接調(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)文章
jQuery+CSS3實現(xiàn)仿花瓣網(wǎng)固定頂部位置帶懸浮效果的導(dǎo)航菜單
這篇文章主要介紹了jQuery+CSS3實現(xiàn)仿花瓣網(wǎng)固定頂部位置帶懸浮效果的導(dǎo)航菜單,可實現(xiàn)頁面向下滑動后導(dǎo)航欄橫向懸浮并固定在頂部的功能,涉及jQuery事件響應(yīng)及頁面元素屬性動態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了jquery獲取當前日期的方法,涉及針對日期時間的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
一般情況下，在jQuery選擇器中，我們很少會用到諸如“.”、“#”、“(”、“[”等特殊字符，但是在實際應(yīng)用中，偶爾也會遇到表達式中含有“#”和“.”等特殊字符,那么是如何處理這些個特殊字符的呢？下面小編給大家介紹下2017-09-09
Jquery實時監(jiān)聽input value的實例
下面小編就為大家?guī)硪黄狫query實時監(jiān)聽input value的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
這篇文章主要介紹了使用jQuery仿蘋果官網(wǎng)焦點圖特效,非常的炫酷，需要的朋友可以參考下2014-12-12
這篇文章主要介紹了jQuery ready方法實現(xiàn)原理詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
jQuery中attr()與prop()函數(shù)用法實例詳解(附用法區(qū)別)
這篇文章主要介紹了jQuery中attr()與prop()函數(shù)用法,結(jié)合實例形式詳細分析了attr()與prop()函數(shù)的使用技巧與相關(guān)注意事項,并附帶了attr()與prop()函數(shù)用法的區(qū)別,需要的朋友可以參考下2015-12-12
jquery基于layui實現(xiàn)二級聯(lián)動下拉選擇(省份城市選擇)
本篇文章主要介紹了jquery基于layui實現(xiàn)二級聯(lián)動下拉選擇(省份城市選擇)，具有一定的實用價值，需要的朋友可以參考下2017-06-06
下面小編就為大家?guī)硪黄猨Query向父輩遍歷的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
本篇文章主要是對同域jQuery(跨)iframe操作DOM進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12