1

所以我有一个瓷砖网格。

js小提琴

我试图根据 mouseenter 方向翻转它们（例如：如果鼠标从底部进入，则瓷砖向上翻转，如果鼠标从左侧进入，瓷砖向右翻转）。出现问题是因为您需要在转换瓷砖之前将瓷砖的背面旋转到正确的方向，以便在正确的方向上进行旋转。

切换按钮应该将所有图块翻转到位置二，然后它们可以在悬停时反向旋转。

如果您查看我的脚本，我已经在 mouseenter 上添加了类，以便为我的方向提供一个钩子。我尝试使用@keyframes 尝试在它们旋转之前设置磁贴的对齐方式，但我无法让磁贴在鼠标悬停时重新旋转。我还使用了一种方法，该方法将瓷砖背面旋转到正确的方向，然后在 10 毫秒后触发动画。不过，这似乎有点麻烦。

还有其他我可能错过的建议吗？

<a href="#" class="toggle">Toggle</a>
<div class="grid">
    <div class="tile posone">
        <div class="front"><img src="http://placehold.it/250x175/00baff/ffffff" height="175" height="250" /></div>
        <div class="back"><img src="http://placehold.it/250x175/ffa800/ffffff" height="175" height="250" /></div>
    </div>
</div>

<script>

flip = { 
    init: function(){
        $('.toggle').on('click', flip.toggle);
        $('.tile').on('hover', flip.hover);
    },

    toggle: function(e){
        e.preventDefault();
        $('.tile').each(function(i, elm) {
                setTimeout(function(){
            flip.autoFlip($(elm));
        }, i*40);
        });
    },

    hover: function(e){
        if (e.type === 'mouseenter'){
            var dir = flip.getDir($(this), { x:e.pageX, y:e.pageY });
        }
        flip.flipOver($(this), e.type, dir);
    },

    flipOver: function($elm, type, dir){

            switch (dir) {
                case 0 :
                    $elm.addClass('top');   
                break;
                case 1 :
                    $elm.addClass('right'); 
                break;
                case 2 :
                    $elm.addClass('bottom');    
                break;
                case 3 :
                    $elm.addClass('left');  
                break;
                default :
                    $elm.removeClass('top right bottom left');
            }

            $elm.toggleClass('posone postwo');

    },

    autoFlip: function($elm){
        $elm.toggleClass('posone postwo');
    },

    getDir: function($elm, coord){
        var w = $elm.width(),
            h = $elm.height(),
            x = ( coord.x - $elm.offset().left - ( w/2 )) * ( w > h ? ( h/w ) : 1 ),
            y = ( coord.y - $elm.offset().top  - ( h/2 )) * ( h > w ? ( w/h ) : 1 ),
            direction = Math.round( ( ( ( Math.atan2(y, x) * (180 / Math.PI) ) + 180 ) / 90 ) + 3 )  % 4;
        return direction;
    }

}

$(document).ready(function() {
    flip.init();
});

</script>
4

1 回答 1

0

不知何故 jsFiddle 现在不会为我加载，但我会说不要旋转.front和.back，.tile在悬停时旋转。并且.back旋转了 180 度（rotateY从左侧rotateX悬停时，从右侧悬停时），没有过渡。

于 2013-01-24T16:23:45.217 回答