使用css3和jquery翻转卡片效果

时间:2014-01-20 17:56:57

标签: jquery css3 flip

有很多css3翻转卡效果,并且有很多支持翻转效果的jquery插件。 我想要一个适用于所有主流浏览器的Modernizr解决方案。 此解决方案必须与典型的HTML标记一起使用:

<div class='flip-container'>
   <div class='flipy'>
      <div class='front'></div>
      <div class='back'></div>
   </div>
</div>

你知道任何解决方案吗?

编辑: 场景:许多配置文件显示为缩略图。当鼠标转到配置文件缩略图时,请返回并显示额外信息 我想使用flip plugin。像这样的jquery实现:

    $(document).ready(function () {
        if (!Modernizr.csstransitions) {
            $('.flip-front').bind("mouseenter", function () {
                var elem = $(this);

                if (elem.data('flipped')) { } else {
                    elem.flip({
                        direction: 'lr',
                        speed: 270,
                        color: '#000000',
                        bgColor: 'black',
                        onBefore: function () {
                            elem.stop(); /*added but still doesn't work*/

                            elem.html(elem.siblings('.flip-back').html());

                        },
                        onAnimation: function () {
                            elem.data('flipped', true);

                        },
                        onEnd: function () {

                        }
                    });
                }
            });

            $('.flip-front').bind("mouseleave", function () {



                var elem = $(this);
                if (elem.data('flipped')) {
                    elem.flip({
                        direction: 'rl',
                        speed: 270,
                        color: '#000000',
                        bgColor: 'black',
                        onBefore: function () {
                            elem.stop(); /*added but still doesn't work*/
                            elem.html(elem.siblings('.flip-front').html());

                        },
                        onAnimation: function () {
                            elem.data('flipped', false);
                        },
                        onEnd: function () {

                        }
                    });
                }
            });
        }
    });

但是上面的脚本不起作用。

0 个答案:

没有答案