【jquery】基于 jquery 的翻拍效果 flip

浏览数：50 / 时间：2015年06月09日

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

<!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 的 js 只需要 core 和 effects core

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

点击下载 demo

【jquery】基于 jquery 的翻拍效果 flip,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style html sp src nb class style html sp src nb

相关文章

随机文章

您可能还喜欢

您可能还喜欢