个人中心
gpt4 book ai didi

javascript - 用 2 个背景图像制作翻转拼图

转载 作者：行者123 更新时间：2023-11-28 04:31:28 24 4
gpt4 key购买 nike

我正在寻求帮助来制作一个带有 2 个背景图片的翻转拼图。

我在该社区的另一篇帖子中发现了与此示例类似的内容:

JSFiddle

但是，我想显示另一幅图像，而不是所有的 ? 符号，并且可能随机化一些单元格，以便一些单元格以 正面(？符号单元格) 和其他作为背面(显示部分背景图像)。

如果有一种方法可以验证两个图像(正面或背面)中的一个是否已完成，请将其显示为模态窗口。到目前为止，我已经设法翻转图像并显示另一个背景。所以我需要帮助来制作网格和单元格，这样我才能翻转卡片。这是我的标记:

HTML:

<!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()">
                <!-- front content -->
            </div>
            <div class="back" onclick="app.controller.flip()">
                <!-- back content -->
            </div>
        </div>

    </div>


</body>
</html>

CSS:

/* 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);
}

JavaScript(使用下划线):

(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 || {});

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

Working Example

最佳答案

您必须提供两张图片，所以我将图片作为 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/ 更新了演示

关于javascript - 用 2 个背景图像制作翻转拼图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41705378/

24 4 0
文章推荐： css - slider 响应
文章推荐： c++ - NS3 套接字混淆(需要帮助理解)
文章推荐： c++ - 如何使用位字段将数据从二进制文件复制到结构中？
文章推荐： c++ - boost::asio::spawn 和 socket::async_receive_from 程序崩溃
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com