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