jQuery懸停文字提示框插件jquery.tooltipster.js用法示例【附demo源碼下載】
本文實例講述了jQuery懸停文字提示框插件jquery.tooltipster.js用法。分享給大家供大家參考,具體如下:
運行效果截圖如下:
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>
完整實例代碼點擊此處本站下載。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
- Some tips of wmi scripting in jscript (1)
- ASP小貼士/ASP Tips javascript tips可以當桌面
- JavaScript Tips 使用DocumentFragment加快DOM渲染速度
- javascript tips提示框組件實現(xiàn)代碼
- JavaScript Title、alt提示(Tips)實現(xiàn)源碼解讀
- 新鮮出爐的js tips提示效果
- JavaScript調(diào)試的多個必備小Tips
- bootstrap tooltips在 angularJS中的使用方法
- 總結(jié)分享10個JavaScript代碼優(yōu)化小tips
相關(guān)文章
easyUI使用分頁過濾器對數(shù)據(jù)進行分頁操作實例分析
這篇文章主要介紹了easyUI使用分頁過濾器對數(shù)據(jù)進行分頁操作,結(jié)合實例形式詳細分析了easyUI分頁過濾器對數(shù)據(jù)進行分頁操作具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2020-06-06jquery實現(xiàn)的藍色二級導(dǎo)航條效果代碼
這篇文章主要介紹了jquery實現(xiàn)的藍色二級導(dǎo)航條效果代碼,涉及jquery鼠標事件及頁面樣式的動態(tài)切換效果實現(xiàn)技巧,非常簡單實用,需要的朋友可以參考下2015-08-08jQuery插件multiScroll實現(xiàn)全屏鼠標滾動切換頁面特效
本文給大家分享的是一款jQuery整屏(全屏)滾動插件網(wǎng)頁特效,滾動鼠標滾輪整屏一屏滾動切換代碼,可設(shè)置文字/圖片絕對上下左右居中顯示JS代碼,時下最流行的jQuery全屏滾動插件!(兼容測試:IE6及以上、Firefox、Chrome、Opera、Safari、360等主流瀏覽器)2015-04-04