Flip

 

　　Flip是一个能够让任意HTML、文本或jQuery Element产生漂亮翻转效果的jQuery插件。

可以配置翻转方向：从右到左、上到下或从左到右、下到上。翻转的速度也可以配置。 

 

效果如下图所示：

 

 

 

官网：http://lab.smashup.it/flip/ （貌似被墙了，需要....一下）

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

需要的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>

html

<!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/559ac93738a915c36ef67e94f65a3e37

 

最简单的调用方法就是： $(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

 

posted @ 2013-09-27 16:38  子夏子  阅读(493)  评论(0)  编辑  收藏  举报
yokoboy