Question

我正在寻找帮助来制作带有2张背景图片的翻盖拼图。

我在此社区的另一篇文章中找到了与此示例类似的内容：

但是，我想要显示另一个图像的所有?符号，而不是所有front face (? symbols cells)个符号，并且可能会将一些单元格随机化，以便某些单元格以<!DOCTYPE html> <html> <head> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" /> <link href="Styles/flipStyle.css" rel="stylesheet" /> <script src="Scripts/jquery-3.1.1.min.js"></script> <script src="Scripts/underscore.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="Scripts/mainControl.js"></script> <title>Flipping Ad</title> </head> <body> <div class="flip-container" id="myContainer"> <div class="flipper canvas"> <div class="front" onclick="app.controller.flip()">  </div> <div class="back" onclick="app.controller.flip()">  </div> </div> </div> </body> </html>开头，而其他单元格则作为背面（显示部分背景图片）。

如果有办法验证两个图像（正面还是背面）中的一个是否完成，请将其显示为模态窗口。到目前为止，我设法翻转图像并显示另一个背景。所以我需要帮助做网格和细胞所以我可以翻转卡片。这是我的标记：

HTML：

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000px;
}
    /* flip the pane when hovered */
    .flip-container.hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

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

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

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

/* front pane, placed above back */
.front {
    background-image:url('../Images/300x300.png');
    background-repeat: no-repeat;
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    background:url('../Images/300x300_2.png');
    background-repeat: no-repeat;
    transform: rotateY(180deg);
}

CSS：

(function (app){
    'use strict';

    app.controller={};
    _.extend(app.controller,{
        toggle_flip: toggle_flip,
        flip: flip,
    });
function toggle_flip(){

        document.querySelector("#myCard").classList.toggle("flip")
    }
    function voltear(){
        document.querySelector('#myContainer').classList.toggle('hover');
    }
})(window.app = window.app || {});

javaScript（使用下划线）：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.realpayment.app.activities.CalledAction"
android:background="@color/c_black">

<android.support.v7.widget.Toolbar
    android:id="@+id/my_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:elevation="4dp"
    android:theme="@style/JupiterTheme"
    app:popupTheme="@style/ThemeOverlay.AppCompat"/>
<WebView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/calledAction"
    android:background="@color/c_black"
    android:layout_margin="15px"
    android:layout_below="@+id/my_toolbar"
    android:textColor="@color/c_white"
    />

总之，就像我发现的这个例子一样，使用切换器。

Working Example

Answer 1

您必须提供两个图像，因此我将图像作为data-属性移动到DOM（而不是CSS ）。

<div class='canvas' data-background="http://placekitten.com/500/300" data-foreground="http://placekitten.com/g/500/300">
</div>

您还需要更改脚本，以便不在?中添加.back，以便该部分成为

var cell = $("<div class='cell flipped'><div class='back'></div><div class='front'></div></div>")

然后，您需要重复添加背景的部分并将其放在.front上，以便为.back执行此操作。

    cell.find('.back')
        .css('background','url('+foregroundImage+')')
        .css('background-position', -(j * colWidth) + 'px ' + -(i * rowHeight) + 'px');

要随机化一些单元格，请使用Math.random()来决定是否要翻转每个单元格

if (Math.random() >= 0.5) cell.toggleClass('flipped');

最后每次翻转单元格时，检查翻转元素的数量是否为0（前图像完整）或col*row（后图像完整 ）

      var flipped = canvas.find('.flipped').length;
      if ((flipped == col*row) || !flipped){
        alert('Full Image');
      }

以模态显示图像的部分留给你。

在http://jsfiddle.net/gaby/LdR29/35/

更新了演示

制作带有2个背景图像的翻盖拼图

1 个答案: