Flip

時間 2019-11-08

標籤 flip 简体版

原文原文鏈接

　　Flip是一個可以讓任意HTML、文本或jQuery Element產生漂亮翻轉效果的jQuery插件。javascript

能夠配置翻轉方向：從右到左、上到下或從左到右、下到上。翻轉的速度也能夠配置。 css

效果以下圖所示：html

官網：http://lab.smashup.it/flip/ （貌似被牆了，須要....一下）java

兼容性：Firefox, Chrome/Chromium, Opera, Safari and even IE 6+jquery

須要的js文件：jQuery、 jQueryUI core、jQueryUI effects core、flip函數

Demo測試

須要的js文件（測試發現，沒有jquery.ui.core.min.js，貌似也能夠）。動畫

<script type="text/javascript" src="js/jquery8.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.effect.min.js"></script>
<script type="text/javascript" src="js/jquery.flip.min.js"></script>

htmlui

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <title>index</title>
        <script type="text/javascript" src="js/jquery8.js"></script>
        <script type="text/javascript" src="js/jquery.ui.core.min.js"></script>
        <script type="text/javascript" src="js/jquery.ui.effect.min.js"></script>
        <script type="text/javascript" src="js/jquery.flip.min.js"></script>
        <style type="text/css" >
            #demo1 {
                height: 200px;
                width: 200px;
                line-height:200px;
                margin: 50px auto;
                background: red;
                text-align: center;
                color: #ddd;
                font-weight: bold;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $("#demo1").click(function() {
                    var $this=$(this);
                    $(this).flip({
                        direction : 'lr',
                        color : "red",
                        speed:500,
                        onBefore : function() {
                            console.info('在開始動畫以前');
                        },
                        onAnimation : function() {
                            console.info('在動畫中間');
                        },
                        onEnd : function() {
                            $this.revertFlip();
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <div id="demo1">
            翻滾吧！
        </div>
    </body>
</html>

本示例文件：http://url.cn/TU9Q6T 或 http://share.weiyun.com/559ac93738a915c36ef67e94f65a3e37this

最簡單的調用方法就是： $(selector).flip({}); 既能夠實現效果。

若是有更加複雜的要求，有下面幾個參數能夠調用：

content

定義翻轉後元素的新內容，能夠是：文本、 HTML 或 jQuery 對象

direction

定義元素翻轉的方向，可選：tb/bt/lr/rl ，默認爲 tb

color

定義元素翻轉後的背景顏色，默認是 #999999

speed

定義翻轉的速度，默認爲 500 毫秒

onBefore

定義元素翻轉以前的回調函數

onAnimation

定義元素翻轉到一半時的回調函數

onEnd

定義元素翻轉以後的回調函數

經典案例：http://www.siteserver.cn/case/

參考：http://www.camnpr.com/archives/jquery-flip-360-degree-flip-jquery-slicebox-3d-effect.html

1. Flink - FLIP
2. Flip Game&&dfs
3. 294. Flip Game II
4. poj 1753 Flip Game
5. Flip Game POJ-1753
6. cv flip函數
7. poj 1753 -- Flip Game
8. java.nio.Buffer flip()方法
9. Flip Game POJ - 1753
10. Flip Game / POJ 1753
更多相關文章...
• jQuery Mobile 過渡 - jQuery Mobile 教程
• jQuery Mobile Data 屬性 - jQuery Mobile 教程

相關標籤/搜索

flip

cv2.flip

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。