jquery插件autocomplete用法示例
714
2024-02-26
本文實例講述了jQuery flip插件實現的翻牌效果。分享給大家供大家參考，具體如下：
最近做了個類似于塔羅牌翻牌的效果，分享給大家。
運行效果圖如下：
具體代碼如下：
<!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="http://www.gimoo.net/t/1812/jquery.min.js"></script>
<script src="http://www.gimoo.net/t/1812/jquery-ui.min.js"></script>
<script src="http://www.gimoo.net/t/1812/jquery.flip.min.js"></script>
<script>
$(function(){
$('.content').click(function(){
var _this = $(this);
_this.flip({
direction: 'lr',
content: '反轉后顯示的內容，反轉后顯示的內容，反轉后顯示的內容，反轉后顯示的內容',
onEnd: function(){
_this.css({
background: 'orange',
color: 'white'
}).unbind('click');
}
});
});
});
</script>
參數說明：
direction：翻轉方向，總共有 4 個值（tb、bt、lr、rl），默認 tb
content：設置翻轉后容器內顯示的內容，可以是文本，可以是 html，甚至可以是 jquery 對象
color：設置翻轉后容器的背景色
speed：設置翻轉速度，值越小速度就越快
onBefore：設置翻轉前需要執行的內容
onAnimation：設置翻轉到一半的時候需要執行的內容
onEnd：設置翻轉完成后需要執行的內容
PS：
jqueryui 需要加載 core 和 effects core
官網地址：
http://lab.smashup.it/flip/
完整實例代碼點擊此處本站下載。
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery窗口操作技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery常用插件及用法總結》、《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
