0

ここにある Rotate3Di を実装しようとしています: http://www.zachstronaut.com/projects/rotate3di/

画像を反転させることはできますが、裏面には表面の鏡像しか表示されず、データベースから取得した独自のコンテンツは表示されません。事前に助けてくれてありがとう。

<script type="text/javascript" language="javascript" charset="utf-8">
$(document).ready(function () {
    $('#movienav li div.back').hide().css('left', 0);

    function mySideChange(front) {
        if (front) {
            $(this).parent().find('div.front').show();
            $(this).parent().find('div.back').hide();

        } else {
            $(this).parent().find('div.front').hide();
            $(this).parent().find('div.back').show();
        }
    }

    $('#movienav li').hover(
        function () {
            $(this).find('div').stop().rotate3Di('flip', 180, 1000, {direction: 'clockwise', sideChange: mySideChange});
        },
        function () {
            $(this).find('div').stop().rotate3Di('unflip', 1000, {sideChange: mySideChange});
        }
    );
});
</script>

HTML

<div id="movienav">
<ul>
<li><div class="front"><img src="<?php echo $imglink; ?>" width="340" height="450" class="dvdcover" /></div>
<div class="back">
<?php echo $description; ?>
</div>
</li>
</ul>
</div>

CSS

#movienav {
    height: 450px;
    width:75%; 
    float:left;
    margin-top:25px; 
    clear:left;
    padding-bottom: 45px;
}

#movienav li {
    width: 340px;
    height: 450px;
    float: left;
    margin-right: 10px;
    position: relative;
    display:inline;
    list-style:none;
}

#movienav li div {
    width: 340px;
    height: 450px;
    overflow: hidden;
    background: #161616;
    position: absolute;
    top: 0;
    left: 0;
}

#movienav li div.back {
    left: -999em;
    padding-bottom: 15px;  
    background-color:#161616; /*max-height:450px; overflow:auto;*/
    margin-top: 0;

}

解決した

上記の行を次のように変更:

$('#movienav li').hover(
    function () {
        $(this).find('div').stop().rotate3Di('180', 400, {direction: 'clockwise', sideChange: mySideChange});
    },
    function () {
        $(this).find('div').stop().rotate3Di('unflip', 400, {sideChange: mySideChange});
    }
);
4

1 に答える 1

0

http://davidwalsh.name/css-flip

私はあなたが欲しいと思いますbackface-visibility: hidden;

正直なところ、これはCSSを介してのみ行い、javascriptを使用して行ったわけではありませんが、最初はを設定するまで同じ問題が発生していましたbackface-visibility。javascriptを介してすべてを行うには、追加の魔法が必要になる場合があります。

于 2013-02-12T22:40:51.097 に答える