jQuery懸停文字提示框插件jquery.tooltipster.js用法示例【附demo源碼下載】
本文實(shí)例講述了jQuery懸停文字提示框插件jquery.tooltipster.js用法。分享給大家供大家參考,具體如下:
運(yùn)行效果截圖如下:
index.html頁面:
<!DOCTYPE html> <html lang="en"> <head> <title>jQuery Tooltips懸停文字提示框效果</title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="css/tooltipster.css" /> <link rel="stylesheet" type="text/css" href="css/style2.css" /> <script type="text/javascript" src="js/jquery-2.0.0.min.js"></script> <script type="text/javascript" src="js/jquery.tooltipster.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.tooltip').tooltipster(); }); </script> </head> <body> <br><br><br><br><br><br><br><br> <section id="facebook"> <ul> <a href="http://www.dbjr.com.cn/" target="_blank"><span id="fackbook" class="tooltip" title="jb51.net">jb51.net</span></a> </ul> </section> <section id="twitter"> <ul> <a href="http://www.dbjr.com.cn/" target="_blank"><span id="twitter-default" class="tooltip" title="JS腳本代碼">JS腳本代碼</span></a> </ul> </section> <section id="google"> <ul> <a href="http://www.dbjr.com.cn/" target="_blank"><span id="google-default" class="tooltip" title="jQuery">jQuery</span></a> </ul> </section> <section id="rss"> <ul> <a href="http://www.dbjr.com.cn/" target="_blank"><span id="rss-default" class="tooltip" title="JS腳本代碼">JS腳本代碼</span></a> </ul> </section> <section id="tech"> <ul> <a href="http://www.dbjr.com.cn/"><span id="tech-default" class="tooltip" title="CSS3">CSS3</span></a> </ul> </section> </center> <section id="dribbble"> <ul> <a href="http://www.dbjr.com.cn/" target="_blank"><span id="dribbble-default" class="tooltip" title="HTML5">HTML5</span></a> </ul> </section><br> <br> <br> <br> <br> </body> </html>
完整實(shí)例代碼點(diǎn)擊此處本站下載。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- Some tips of wmi scripting in jscript (1)
- ASP小貼士/ASP Tips javascript tips可以當(dāng)桌面
- JavaScript Tips 使用DocumentFragment加快DOM渲染速度
- javascript tips提示框組件實(shí)現(xiàn)代碼
- JavaScript Title、alt提示(Tips)實(shí)現(xiàn)源碼解讀
- 新鮮出爐的js tips提示效果
- JavaScript調(diào)試的多個(gè)必備小Tips
- bootstrap tooltips在 angularJS中的使用方法
- 總結(jié)分享10個(gè)JavaScript代碼優(yōu)化小tips
相關(guān)文章
easyUI使用分頁過濾器對(duì)數(shù)據(jù)進(jìn)行分頁操作實(shí)例分析
這篇文章主要介紹了easyUI使用分頁過濾器對(duì)數(shù)據(jù)進(jìn)行分頁操作,結(jié)合實(shí)例形式詳細(xì)分析了easyUI分頁過濾器對(duì)數(shù)據(jù)進(jìn)行分頁操作具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2020-06-06jquery購物車結(jié)算功能實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了jquery購物車結(jié)算功能的實(shí)現(xiàn)方法,購買多個(gè)商品進(jìn)行統(tǒng)一結(jié)算,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11jQuery實(shí)現(xiàn)表單驗(yàn)證功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)表單驗(yàn)證功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10jquery實(shí)現(xiàn)的藍(lán)色二級(jí)導(dǎo)航條效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)的藍(lán)色二級(jí)導(dǎo)航條效果代碼,涉及jquery鼠標(biāo)事件及頁面樣式的動(dòng)態(tài)切換效果實(shí)現(xiàn)技巧,非常簡單實(shí)用,需要的朋友可以參考下2015-08-08jQuery插件multiScroll實(shí)現(xiàn)全屏鼠標(biāo)滾動(dòng)切換頁面特效
本文給大家分享的是一款jQuery整屏(全屏)滾動(dòng)插件網(wǎng)頁特效,滾動(dòng)鼠標(biāo)滾輪整屏一屏滾動(dòng)切換代碼,可設(shè)置文字/圖片絕對(duì)上下左右居中顯示JS代碼,時(shí)下最流行的jQuery全屏滾動(dòng)插件?。嫒轀y(cè)試:IE6及以上、Firefox、Chrome、Opera、Safari、360等主流瀏覽器)2015-04-04jquery實(shí)現(xiàn)的Banner廣告收縮效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)的Banner廣告收縮效果代碼,可實(shí)現(xiàn)點(diǎn)擊按鈕收縮與展開廣告圖片的功能,非常簡單實(shí)用,需要的朋友可以參考下2015-09-09WordPress 照片lightbox效果的運(yùn)用幾點(diǎn)
應(yīng)該大家都知曉lightbox這類燈箱效果了,它一般更多地被運(yùn)用在網(wǎng)站照片的顯示上。當(dāng)然還有更推廣的應(yīng)用,如facebox這種更漂亮全面的效果。2009-06-06