jquery 簡單的title顯示插件

更新時間：2010年05月31日 19:30:46 作者：

這個代碼，針對學(xué)習(xí)jquery插件制作的朋友可以參考下。效果并不是主要的。

學(xué)到插件自己也倒弄出來一個。

效果圖如下：

代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>無標(biāo)題頁</title> <style type="text/css"> #conBox{ position:absolute; width:200px;padding:5px;display:none;background:#666;z-index:999;border-radius:5px;} </style> <script src="http://img.jb51.net/jslib/jquery/jquery14.js" type="text/javascript"></script> </head> <body> <span id="lovlqiz"    class="ll" title="123">你好</span> <a title="123" href="#">四大發(fā)送</a> <a title="123" href="#">12331</a> <a title="123" href="#">12331</a> <a title="123" href="#">12331</a> <a title="123" href="#">12331</a> <a title="123" class="ll" href="#">1的爽膚水</a> <a title="123" href="#">1撒旦法1</a> <a title="123" href="#">12撒旦法1</a><a title="123" href="#">12331</a> <a title="123" href="#">12331</a> <a title="123" href="#">12331</a> <a title="123" class="ll" href="#">12331</a> <div></div> <script language="javascript" type="text/javascript"> $(function(){ //插件主題 $.fn.extend({ showTitle:function(){ $('<div   class="prifksv"   id="conBox"></div>').appendTo('body'); var d=$("#conBox"); this.bind({ mouseover:function(){ if(!$("#conBox")){ $('<div   class="sjqonug"   id="conBox"></div>').appendTo('body'); }else{ d=$("#conBox"); } var of=$(this).offset(); var title=$(this).attr("title"); //定義位置 d.css({top:of.top+$(this).height()+"px",left:$(this).width()/2+of.left+"px"}).text($(this).attr("title")); //顯示 d.fadeIn(); }, mouseout:function(){ //鼠標(biāo)一走隱藏 d.fadeOut(); } }); } }); //調(diào)用 $(".ll").showTitle(); }); </script> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

相關(guān)文章

JQuery 1.4 中的Ajax問題
心血來潮下了最新版本的JQuery1.4，寫一個頁面通過Ajax加載的的例子。
2010-01-01
JQuery+drag.js上傳圖片并且實現(xiàn)圖片拖曳
這篇文章主要介紹了JQuery+drag.js上傳圖片并且實現(xiàn)圖片拖曳,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-11-11
ASP.NET jQuery 實例10 動態(tài)修改hyperlink的URL值
這節(jié)我們來看下如何實現(xiàn)通過選擇RadioButtonList值動態(tài)改變hyperlink控件的URL值，并簡要介紹bind和live方法的區(qū)別
2012-02-02
dul無法加載bootstrap實現(xiàn)unload table/user恢復(fù)
這篇文章主要介紹了dul無法加載bootstrap實現(xiàn)unload table/user恢復(fù)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-09-09
jquery 插件學(xué)習(xí)（四）
如果你明白了前面講的使用jquery.fn對象屬性的方法創(chuàng)建jquery對象的方法，那么使用extend()方法創(chuàng)建jquery對象就比較容易理解了。理解了嗎，一定要仔細(xì)揣摩，仔細(xì)研究。我也是再慢慢的學(xué)習(xí)，慢慢的領(lǐng)悟
2012-08-08
jquery操作 iframe的方法
這篇文章主要介紹了jquery操作 iframe的方法,需要的朋友可以參考下
2014-12-12
30個最佳jQuery Lightbox效果插件分享
Lightbox 應(yīng)該是最流行的圖片瀏覽效果了，常具有功能包括：自動根據(jù)窗口的大小縮放圖片，模式窗口，幻燈片方式播放，內(nèi)容預(yù)加載，漸變等效果。
2011-04-04
vue-preview縮略圖報錯解決
這篇文章主要為大家介紹了vue-preview縮略圖報錯解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
jQuery 順便學(xué)習(xí)下CSS選擇器奇偶匹配nth-child(even)
今天學(xué)習(xí)jQuery,看到nth-child(even)用法，特意找了下這個選擇器的用法,在CSS3標(biāo)準(zhǔn)中，用法很強大。
2010-05-05
jquery實現(xiàn)圖片上傳之前預(yù)覽的方法
這篇文章主要介紹了jquery實現(xiàn)圖片上傳之前預(yù)覽的方法,涉及jquery針對圖片及頁面元素的相關(guān)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-07-07