2

我用 Classic ASP 构建了我的 CMS（是的，我知道它很旧）。它有一个购物车和支付系统。除了标题、价格、缩略图等之外，我还添加了任何产品的功能：“用于堆叠的图像”。

因此，例如，如果您正在销售 T 恤，则页面上的一个“产品”将是“衬衫样式”，它有自己的 PNG 与之相关联。同一页面上的下一个“产品”将是“衬衫颜色”。然后是“标志”或“文字”。这些项目中的每一项都会影响页面左侧的一个图像，以便这些 PNG“堆叠”以创建最终产品的外观。

我的弱点是javascript和css。有没有人有一些代码或线索来帮助我？

哦，还有数百张图片，请提供有关如何使它们即时加载的提示，而不是在页面加载时尝试加载所有图片。

谢谢各位程序员！

4

3 回答 3

3

CSS 属性position:absolute允许您将元素置于彼此之上并z-index控制堆叠顺序，因此请使用它们来正确设置。

然后动态加载使用 javascript 将src任何现有元素更改为您需要的任何内容，就像这样。（使用 jQuery）

<div id="shirt>
    <img id="color" src="blank.png">
    <img id="decal" src="blank.png">
    <img id="logo" src="blank.png">
</div>

-

$('#color').attr('src','red-shirt.png');
$('#decal').attr('src','lion-decal.png');
$('#logo').attr('src','bold-logo.png');
于 2012-05-09T16:17:36.697 回答
2

用于z-index确定哪个图像在顶部并且可能position:absolute在一个图像上，以便图像重叠。

但是这里可以有很多方法。试试这个：http: //jsfiddle.net/N6rjG/

在那里，您将 T 恤作为 div 的背景，然后将选定的图像放入其中。脚本已经存在并且很简单。

html:

<!-- This one will be the tshirt--->
<div id="tshirt">
</div>

<h1>Click on Image to Select Design</h1>
<!--the choices-->
<img id="d1" class="d" src="https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcQUomLjtjuA81HKgj48ZaIT6Uvd9JGttmUvVcFO3j3ytp6v6MV0" />

<img id="d2" class="d" src="http://www.ironman2.net/iron-man.jpg" />

<img class="d" src="http://www.unc.edu/~bhamidi/personal/naruto.jpg" />​

CSS：

#tshirt{
   float:left;
   width:390px;
   height:400px;
   background:url(http://www.schumacher-fanclub.com/media/SFR1119-ferrari-t-shirt-small-scudetto-red.jpg);
}

.d{
    width:100px;
    height:130px;
    cursor:pointer;
}

脚本：

$('img').click(function(){
    $("#tshirt").html(' ');
    $(this).clone()
        .appendTo("#tshirt")
        .css({margin:'130px 0 0 150px'});
});​
于 2012-05-09T16:44:49.210 回答
1

不幸的是，您的问题比您想象的要广泛。

除了一些聪明的 CSS 之外，您可能还在寻找 AJAX。我建议您查看 jQuery。W3Schools 有一个非常好的教程。一旦掌握了基础知识，就可以设置一些基本的 AJAX 来加载图像文件，并将它们堆叠在一起。JQuery 有一种使用 AJAX 的非常简单的方法，所以一旦你弄清楚 jQuery 是如何工作的，你就不应该有任何麻烦。

从那里，您可以使用 CSS 定位每个图像文件。我将每个设置为 basic <img>，并将它们全部放在一个<div>. 从那里，看看position: absolute;，你可以希望找出其余的。如果您有更具体的问题，请不要犹豫！

于 2012-05-09T16:25:53.583 回答