1

だから私はタイルのグリッドを持っています。

jsフィドル

mouseenter 方向に基づいてそれらを反転しようとしています (例: マウスが下から入るとタイルが上に反転し、マウスが左から入るとタイルが右に反転します)。正しい方向に回転させるために、タイルを変換する前に、タイルの背面を正しい方向に回転させる必要があるため、問題が発生します。

トグルは、すべてのタイルを位置 2 に反転し、ホバー時に逆に回転できるようにすることになっています。

私のスクリプトを見ると、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 に答える