Question

我不是编码员所以我只是想知道。

实施例每个图像都包含一个拼图，并有一个空白/透视背景（允许分层效果）。

用户经历了构建拼图的过程，能够选择不同的部分。

当用户选择新拼图并创建字符串时，将调用位图图像。字符串中的每个字母都调用一个位图图像，整个字符串本身就会创建用户难题。

之前是否完成过？有什么可以用来构建它？

编辑：我想知道，对于每个图像被调用的数千个图像的网站，这种方法是否会为每个图像节省几kb并加快网站的速度

Answer 1

当然有可能。要求：

每个位图都必须支持透明度。 PNG是目前的标准路线。
您需要使用CSS来覆盖每个图像。有几种可能的路线，但最有用的路线（我使用过的）被称为＆＃34;绝对定位＆＃34;。有了它，您可以准确指定每个图像出现在区域内的位置。然后，为每个图像选择重叠区域是一件简单的事情。

我在这里掀起了一个快速概念验证：

http://jsfiddle.net/acy51ond/

.container {
    position: relative;
    border: 1px solid black;
    height: 150px;
    width: 150px;
}

.container img {
    position: absolute;
    top: 0;
    left: 0;
}

Answer 2

玩这个主意很有趣。

还是有点粗糙，但这是一个开始。我这样做的方法是用PHP创建页面主要是为了初始化JS变量。

它可容纳任意数量的作品。只需添加更多ID为＆＃34; p＆＃34;再加上div的数量。并展开数组并创建图像。

init（）例程获取所有具有以＆＃34; p＆＃34;开头的id的div。并交叉引用div id编号和p []数组中的位置。这样，只要其他div id不以p开头，它就会自动扩展，而其他div不会影响编码。默认样式也在此处初始化。 div不需要CSS（只是HTML）。 div可以添加到init例程中的HTML中

要完成它，您需要添加一个功能，以便在例程中的toggle（）中选择拼图。

这是经过测试的代码。只需复制并粘贴到html文件中，保存图像即可运行。

To see the page working Click Here

说明：
单击一个框，将出现一个拼图每次单击该框时，它都会打开和关闭该部分

<!DOCTYPE html>
<html lang="en">
<head>
<title>Overlapp Images</title>
<style type="text/css">
#contents{position:relative;height:500px;width:500px;}
</style>
</head><body><div id="contents">
<div id="p1" onclick="toggle(1)"></div>
<div id="p2" onclick="toggle(2)"></div>
</div>
<script type="text/javascript">
//<![CDATA[
var p = document.getElementsByTagName("div");
var onOff = new Array;
onOff.push(0);
var xref = new Array;
xref.push(0);
var width = ['100px','73px','100px'];
var height = ['100px','100px','73px'];
var t = ['100','0px','80px'];
var left = ['','15px','0px'];
function init(){
var did='';
var ndx=0;
  for (var div=0; div<p.length; div++){
    did = p[div].getAttribute("id");
    if (did != null){
      if (did.substring(0,1) == "p"){
        ndx = parseInt(did.substring(1));
        p[div].style.border = '1px solid #000';
        p[div].style.width = width[0];
        p[div].style.height = height[0];
        p[div].style.top = t[0] * (ndx - 1) + 'px';
        p[div].style.left = left[0];
        p[div].style.position = 'absolute';
        onOff.push(0);
        xref.push(ndx);
      }
    }
  }
}
console.log(xref);
function toggle(id){
  if (onOff[id]!=1){
    p[xref[id]].style.backgroundImage = 'url(puzzle' + id + '.png)';
    p[xref[id]].style.border = 0;
    p[xref[id]].style.width = width[id];
    p[xref[id]].style.height = height[id];
    p[xref[id]].style.top = t[id];
    p[xref[id]].style.left = left[id];
    onOff[id]=1;
  }
  else{
    p[xref[id]].style.backgroundImage = '';
    p[xref[id]].style.border = '1px solid #f00';
    p[xref[id]].style.width = width[id];
    p[xref[id]].style.height = height[id];
    p[xref[id]].style.top = t[id];
    p[xref[id]].style.left = left[id];
    onOff[id]=0;
  }
}
window.onload = init;
//]]></script>
</body></html>

是否可以将多个位图图像堆叠在一起？

2 个答案: