使用jquery flip插件的一个简单例子

效果图：

（旋转效果）

1.首先去网站http://lab.smashup.it/flip/下载插件

2.引入到网页

<script type="text/javascript" src="js/jquery.flip.min.js"></script>

3.引入jquery的文件

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

4.在页面载入的时候调用函数

  <script type="text/javascript">
        $(document).ready(function(){
            $("#mainWrapper").flip({
                direction:'tb'
            });
        });

        function aaa(){

            $("#bbb").flip({
                direction:'tb'
            });
        }
    </script>

html页面：

  <div class="contentFirst" id="bbb" οnclick="javascript:aaa()"></div>

完毕.

如果修改代码：

 $(".contentFirst").flip({
                direction:'tb',
                content:'this is my new content'
            })

则反转后的内容中会出现文字