有很多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 () { } }); } }); } });
但是上面的脚本不起作用。