快捷導(dǎo)航

jQuery flip插件實(shí)現(xiàn)的翻牌效果示例【附demo源碼下載】

更新時(shí)間：2016年09月20日 15:24:47 作者：朱羽佳

這篇文章主要介紹了jQuery flip插件實(shí)現(xiàn)的翻牌效果,可實(shí)現(xiàn)類(lèi)似卡羅牌翻頁(yè)的視覺(jué)效果,涉及jquery.flip.min.js插件的使用,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下

本文實(shí)例講述了jQuery flip插件實(shí)現(xiàn)的翻牌效果。分享給大家供大家參考，具體如下：

最近做了個(gè)類(lèi)似于塔羅牌翻牌的效果，分享給大家。

運(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/