Flippy 雖然跟筆者之前介紹的 Flip! 很像，但因為利用了 Canvas 來產生動畫，所以整個翻轉的效果會比 Flip!。
基本上支援目前主流的各大瀏覽器，不過也因為用到了 Canvas，所以 IE8 及更早的版本就不支援了。除非額外引用了 ExplorerCanvas。
套件名稱：Flippy
套件版本：1.0.1
作者網站：http://blog.guilhemmarty.com/flippy/
套件網址：N/A
發佈日期：2012-02-11
檔案大小：12.5 KB
檔案下載：jquery.flippy.js
參數選項說明：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | color_target(選填) 描述： 翻轉結束後的區塊背景顏色 預設值： "white" content(選填) 描述： 當翻轉後要顯示的內容, 可以是 html 或單純的文字內容, 也可以接受 jQuery 物件 預設值： "" direction(選填) 描述： 翻轉的方向, 接受的值有: "RIGHT"、"LEFT"、"BOTTOM" 及 "TOP" 預設值： "LEFT" duration(選填) 描述： 翻轉速度(1000毫秒 = 1秒) 預設值： 300 depth(選填) 描述： 翻轉時的變形效果(試著自己加調整加大後看效果) 預設值： 0.12 light(選填) 描述： 翻轉時的光線及陰影強度(試著自己加調整加大後看效果) 預設值： 60 refresh_rate(選填) 描述： 翻轉更新頻率(數字越小越慢) 預設值： 15 onStart(選填) 描述： 當翻轉開始時要執行的動作 預設值： function(){} onMidway(選填) 描述： 當翻轉到一半時要執行的動作 預設值： function(){} onFinish(選填) 描述： 當翻轉結束後要執行的動作 預設值： function(){} |
方法說明：
檢視原始碼 JavaScript
1 2 | // 讓指定元素進行翻轉 $(selector).flippy(opts); |
使用範例：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.flippy.js"></script> <style type="text/css"> #flippyBox{ background: #b6d635; color: #333; font-size: 20px; min-width: 500px; width: 500px; min-height: 300px; height: 300px; text-align: center; line-height: 300px; margin: 0 auto; } #flippyBox .top{ /* 翻轉後內容元素會套上相對應方向的 className */ padding: 5px; } #flippyBox .left, #flippyBox .bottom{ /* 翻轉後內容元素會套上相對應方向的 className */ text-align: center; color: #fff; } #flippyButtons{ text-align: center; line-height: 20px; margin-top: 20px; } .flippyButton{ background: #333; color: #fff; padding: 5px 10px; margin: 0 5px; } .flippyButton:hover{ text-decoration: none; background: #333; } #flippyContents{ display: none; } </style> <script type="text/javascript"> $(function(){ // 按下 left 鈕時 $('#flippyGoLeft').click(function(e){ e.preventDefault(); // 向左翻轉後的顏色變為 black, 且內容來源為 #flippyContentLeft $('#flippyBox').flippy({ color_target: 'black', content: $('#flippyContentLeft'), direction: 'LEFT', duration: '750' }); }); // 按下 top 鈕時 $('#flippyGoTop').click(function(e){ e.preventDefault(); // 向上翻轉後內容變更為 <img class="top" src="sunsangNX200_01.jpg" alt="Aston Martin"/> // 當翻轉完後淡入 $('#flippyBox').flippy({ content: '<img class="top" src="sunsangNX200_01.jpg" alt="Aston Martin"/>', direction: 'TOP', duration: '750', onFinish:function(){ $('#flippyBox .top').hide().fadeIn(300); } }); }); // 按下 bottom 鈕時 $('#flippyGoBottom').click(function(e){ e.preventDefault(); // 向下翻轉後的顏色變為 #333333, 且內容來源為 #flippyContentBottom $('#flippyBox').flippy({ color_target: '#333333', content: $('#flippyContentBottom'), direction: 'BOTTOM', duration: '750' }); }); // 按下 right 鈕時 $('#flippyGoRight').click(function(e){ e.preventDefault(); // 向右翻轉後的顏色變為 #b6d635, 且內容變更為 Awesome ! $('#flippyBox').flippy({ color_target: '#b6d635', content: 'Awesome !', direction: 'RIGHT', duration: '750' }); }); }); </script> <body> <div id="flippyBox">Flippy Box</div> <div id="flippyButtons"> <a id="flippyGoLeft" class="flippyButton" href="#">Left</a> <a id="flippyGoTop" class="flippyButton" href="#">Top</a> <a id="flippyGoBottom" class="flippyButton" href="#">Bottom</a> <a id="flippyGoRight" class="flippyButton" href="#">Right</a> </div> <div id="flippyContents"> <div id="flippyContentLeft" class="flippyContent"> <div class="left">翻轉後的來源可以是指定區塊的內容</div> </div> <div id="flippyContentBottom" class="flippyContent"> <div class="bottom">翻滾吧！阿信</div> </div> </div> </body> |