jQuery flip插件實(shí)現(xiàn)的翻牌效果示例【附demo源碼下載】
本文實(shí)例講述了jQuery flip插件實(shí)現(xiàn)的翻牌效果。分享給大家供大家參考，具體如下：
最近做了個(gè)類似于塔羅牌翻牌的效果，分享給大家。
運(yù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ù)說(shuō)明：
direction：翻轉(zhuǎn)方向，總共有 4 個(gè)值（tb、bt、lr、rl），默認(rèn) tb
content：設(shè)置翻轉(zhuǎn)后容器內(nèi)顯示的內(nèi)容，可以是文本，可以是 html，甚至可以是 jquery 對(duì)象
color：設(shè)置翻轉(zhuǎn)后容器的背景色
speed：設(shè)置翻轉(zhuǎn)速度，值越小速度就越快
onBefore：設(shè)置翻轉(zhuǎn)前需要執(zhí)行的內(nèi)容
onAnimation：設(shè)置翻轉(zhuǎn)到一半的時(shí)候需要執(zhí)行的內(nèi)容
onEnd：設(shè)置翻轉(zhuǎn)完成后需要執(zhí)行的內(nèi)容
PS：
jqueryui 需要加載 core 和 effects core
官網(wǎng)地址：
http://lab.smashup.it/flip/
完整實(shí)例代碼點(diǎn)擊此處本站下載。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery窗口操作技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jquery slibings選取同級(jí)其他元素的實(shí)現(xiàn)代碼
jquery選取同級(jí)其他元素可以使用slibings方法，end方法可以清除之前的鏈?zhǔn)讲僮鳎喈?dāng)于重新開始2013-11-11
這篇文章主要介紹了jQuery中has()方法用法,實(shí)例分析了has()方法的功能、定義及保留包含特定后代的匹配元素的使用技巧,需要的朋友可以參考下2015-01-01
jQuery Ajax之$.get()方法和$.post()方法
load()方法通常用來(lái)從Web服務(wù)器上獲取靜態(tài)的數(shù)據(jù)文件，然而這并不能體現(xiàn)Ajax的全部?jī)r(jià)值。在項(xiàng)目中，如果需要傳遞一些參數(shù)給服務(wù)器中的頁(yè)面，那么可以使用$.get()或者$.post()方法（或者是后面要講解到的$.ajax方法）。2009-10-10
jQuery實(shí)現(xiàn)漂亮實(shí)用的商品圖片tips提示框效果(無(wú)圖片箭頭+陰影)
這篇文章主要介紹了jQuery實(shí)現(xiàn)漂亮實(shí)用的商品圖片tips提示框效果,具有鼠標(biāo)滑過(guò)顯示動(dòng)態(tài)提示框的效果,涉及針對(duì)鼠標(biāo)事件的響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作技巧,需要的朋友可以參考下2016-04-04
瀏覽者是否對(duì)網(wǎng)站感興趣，前20秒的第一印象至關(guān)重要，所以我們的設(shè)計(jì)要符合大眾的期望。下面我們將設(shè)計(jì)一個(gè)個(gè)性的導(dǎo)航菜單。2009-12-12
jquery瀏覽器滾動(dòng)加載技術(shù)實(shí)現(xiàn)方案
Google閱讀器上有一個(gè)AJAX效果很不錯(cuò)，就是閱讀項(xiàng)目時(shí)不需要翻頁(yè)，瀏覽器滾動(dòng)條往下拉到一定位置時(shí)自動(dòng)加載新的一批項(xiàng)目進(jìn)來(lái)，一直到所有項(xiàng)目加載完為止。對(duì)于我來(lái)說(shuō)再好不過(guò)了，因?yàn)槲液懿幌矚g翻頁(yè)，尤其是輸入頁(yè)碼再定位到頁(yè)。2014-06-06
使用jQuery 操作table 完成單元格合并的實(shí)例
下面小編就為大家分享一篇使用jQuery 操作table 完成單元格合并的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
jQuery實(shí)現(xiàn)標(biāo)題有打字效果的焦點(diǎn)圖代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)標(biāo)題有打字效果的焦點(diǎn)圖代碼,可實(shí)現(xiàn)幻燈片切換顯示時(shí)標(biāo)題同步逐個(gè)打印顯示的效果,涉及jQuery操作json格式數(shù)據(jù)及時(shí)間函數(shù)的相關(guān)技巧,需要的朋友可以參考下2015-11-11
正負(fù)小數(shù)點(diǎn)后兩位浮點(diǎn)數(shù)實(shí)現(xiàn)原理及代碼
需要做個(gè)對(duì)兩位小數(shù)點(diǎn)的正負(fù)浮點(diǎn)數(shù)的處理要求：非數(shù)字或者.字符自動(dòng)清除，并對(duì).12自動(dòng)修補(bǔ).前的0，實(shí)現(xiàn)原理如下，感興趣的朋友可以參考下2013-09-09
基于jquery的監(jiān)控?cái)?shù)據(jù)是否發(fā)生改變
在實(shí)際開發(fā)中經(jīng)常會(huì)遇到數(shù)據(jù)沒(méi)發(fā)生改變是，由于用戶不小心點(diǎn)擊保存，這樣導(dǎo)致數(shù)據(jù)庫(kù)的日志增大；還有數(shù)據(jù)填寫好后，忘了添加保存直接關(guān)閉頁(yè)面離開。2011-04-04