zoukankan      html  css  js  c++  java
  • 【jquery】基于 jquery 的翻牌效果 flip

    最近做了个类似于塔罗牌翻牌的效果,分享给大家。

    <!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: '反转后显示的内容,反转后显示的内容,反转后显示的内容,反转后显示的内容',
                onEnd: function(){
                    _this.css({
                        background: 'orange',
                        color: 'white'
                    }).unbind('click');
                }
            });
        });
    });
    </script>

    参数说明:

    direction:翻转方向,总共有 4 个值(tb、bt、lr、rl),默认 tb

    content:设置翻转后容器内显示的内容,可以是文本,可以是 html,甚至可以是 jquery 对象

    color:设置翻转后容器的背景色

    speed:设置翻转速度,值越小速度就越快

    onBefore:设置翻转前需要执行的内容

    onAnimation:设置翻转到一半的时候需要执行的内容

    onEnd:设置翻转完成后需要执行的内容

    PS:

    jqueryui 需要加载 core 和 effects core

    官网地址:Flip! A jQuery plugin v0.9.9

    点击下载 demo

  • 相关阅读:
    [UVA100] The 3n + 1 problem.题解
    [SP1] TEST
    LCA【模板】
    [P1000] 超级玛丽游戏.题解
    [P3367]【模板】并查集.题解
    并查集【模板】
    洛谷 P1890 【gcd区间】
    浅谈分块算法经典问题&优化
    Floyd算法详(cha)解
    逆序对
  • 原文地址:https://www.cnblogs.com/yjzhu/p/3863670.html
Copyright © 2011-2022 走看看