本文實例講述了jQuery flip插件實現(xiàn)的翻牌效果。分享給大家供大家參考,具體如下:
最近做了個類似于塔羅牌翻牌的效果,分享給大家。
運行效果圖如下:

具體代碼如下:
<!doctype html><html lang="en"><head> <meta charset="UTF-8"/> <title>flip</title> <style> *{margin:0;padding:0;} .content{background:orange;height:300px;margin:100px auto;width:200px;} </style></head><body> <div class="content"></div></body></html><script src="jquery.min.js"></script><script src="jquery-ui.min.js"></script><script src="jquery.flip.min.js"></script><script>$(function(){ $('.content').click(function(){ var _this = $(this); _this.flip({ direction: 'lr', content: '反轉(zhuǎn)后顯示的內(nèi)容,反轉(zhuǎn)后顯示的內(nèi)容,反轉(zhuǎn)后顯示的內(nèi)容,反轉(zhuǎn)后顯示的內(nèi)容', onEnd: function(){ _this.css({ background: 'orange', color: 'white' }).unbind('click'); } }); });});</script>參數(shù)說明:
direction:翻轉(zhuǎn)方向,總共有 4 個值(tb、bt、lr、rl),默認 tb
content:設(shè)置翻轉(zhuǎn)后容器內(nèi)顯示的內(nèi)容,可以是文本,可以是 html,甚至可以是 jquery 對象
color:設(shè)置翻轉(zhuǎn)后容器的背景色
speed:設(shè)置翻轉(zhuǎn)速度,值越小速度就越快
onBefore:設(shè)置翻轉(zhuǎn)前需要執(zhí)行的內(nèi)容
onAnimation:設(shè)置翻轉(zhuǎn)到一半的時候需要執(zhí)行的內(nèi)容
onEnd:設(shè)置翻轉(zhuǎn)完成后需要執(zhí)行的內(nèi)容
PS:
jqueryui 需要加載 core 和 effects core
官網(wǎng)地址:
http://lab.smashup.it/flip/
完整實例代碼點擊此處本站下載。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery窗口操作技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
新聞熱點
疑難解答