3

I am developing a functionality where I am flipping a div with background image. When I flip the div there should be a new image on other side.

I have tried following jquery plugin and the results are:

  1. Flippy: It is working very fine in IE10, chrome and firefox but it is not working in IE9 correctly It makes image to disappear and flips gray colored div.

  2. Flip!: It makes image to disappear and flips gray colored div.

  3. image flip: 2D flip

  4. Quick flip: 2D flip

  5. rotate3di: 3d flip but it appears like we are viewing from certain angle.

Please suggest a way for flipping a div in IE9. Any help will be appreciated

4

5 に答える 5

0

編集: これは IE9 で動作します。IE は単に jsfiddle を嫌い、動作させることを拒否します。つまりIEに死ね！

キャンバスを使用することをお勧めします！キャンバスが 100x100 で、キャンバスに 100x200 の画像をロードすると、半分が外側になります。画像を反転すると、他の部分が表示されます (ただし、反転するため、元の画像を反転する必要があります)。

http://jsfiddle.net/H82Tq/1/

var c = document.getElementById("joker");
var ctx = c.getContext("2d");
var img = document.createElement('img');
img.src = 'http://i.istockimg.com/file_thumbview_approve/7625283/2/stock-illustration-7625283-joker-face-two-playing-card.jpg';


var b = false;
$(c).click(function(){
    if (b) {
        ctx.drawImage(img, -246, 0, 246, 380);
    } else {
        ctx.drawImage(img, 0, 0, 246, 380);
    }

    b = !b;
    ctx.scale(-1, 1);
}).click();
于 2013-09-17T10:40:36.037 に答える
0

私はこれがあなたが必要としているものだと思うこのデモを見てください：FLIPPING CIRCLE SLIDESHOW

それは画像以上のもので反転し、従うのが簡単なコードであり、必要なものを手に入れることができるようにカスタマイズすることができます.

これが役立つことを願っています。

于 2013-09-17T01:15:49.987 に答える
0

FF と Chrome については、ここをいじりました:
http://jsfiddle.net/RXU84/

ただし、現在アクセスできないため、IEでテストできませんでした。
ここにいるこの男のおかげで.. David

HTML

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            <!-- front content -->
            <img src="http://i.imgur.com/FrJqOAP.jpg"/>
        </div>
        <div class="back">
            <!-- back content -->
            <img src="http://i.imgur.com/eIkgvPL.jpg"/>
        </div>
    </div>
</div>

CSS

        /* simple */
    .flip-container {
        -webkit-perspective: 1000;
        -moz-perspective: 1000;
        perspective: 1000;

        border: 1px solid #ccc;
    }


        .flip-container:hover .flipper, 
                    .flip-container.hover .flipper, #flip-toggle.flip .flipper {
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            transform: rotateY(180deg);
            filter: FlipH;
            -ms-filter: "FlipH";
        }

    .flip-container, .front, .back {
        width: 320px;
        height: 427px;
    }

    .flipper {
        -webkit-transition: 0.6s;
        -webkit-transform-style: preserve-3d;

        -moz-transition: 0.6s;
        -moz-transform-style: preserve-3d;

        transition: 0.6s;
        transform-style: preserve-3d;

        position: relative;
    }

    .front, .back {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;

        position: absolute;
        top: 0;
        left: 0;
    }

    .front {
        background: lightgreen;
        z-index: 2;
    }

    .back {
        background: lightblue;
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .front .name {
        font-size: 2em;
        display: inline-block;
        background: rgba(33, 33, 33, 0.9);
        color: #f8f8f8;
        font-family: Courier;
        padding: 5px 10px;
        border-radius: 5px;
        bottom: 60px;
        left: 25%;
        position: absolute;
        text-shadow: 0.1em 0.1em 0.05em #333;

        -webkit-transform: rotate(-20deg);
        -moz-transform: rotate(-20deg);
        transform: rotate(-20deg);
    }
于 2013-09-16T21:34:43.463 に答える