如何在 JavaScript 中显示堆叠在一起的多张图片答案

【问题标题】：How to display multiple pictures stacked on top of each other in JavaScript如何在 JavaScript 中显示堆叠在一起的多张图片
【发布时间】：2011-11-13 11:58:31
【问题描述】：

在网页上，我想显示专辑列表，在每个专辑名称旁边，我想显示堆叠在一起的图片列表。动态拍摄照片列表并将它们堆叠在一起的最佳方法是什么

这是一个例子：

【问题讨论】：

当您说动态拍摄照片列表时，它们来自哪里。我想用 CSS 将 img 元素堆叠在无序列表中会非常简单，但是如果没有代码示例就很难说
@mu 太短 - 像您在大多数工具上看到的那样垂直堆叠，这些工具显示一个相册以及该相册中的一堆图片
@mu 太短了 - 我举了一个我正在尝试做的例子
所以你的意思是重叠或“堆叠成一堆”而不是“垂直堆叠”。
@mu 太短了——是的，我的意思是叠成一堆

标签： javascript jquery image

【解决方案1】：

为什么不建一个？这并不难。这是我设计的一个小型旋转原型（大概花了 5 分钟来写）

Element.prototype.rotate = function(d) {
    var s = "rotate(" + d + "deg)";
    if (this.style) { // regular DOM Object
        this.style.MozTransform = s;
        this.style.WebkitTransform = s;
        this.style.OTransform = s;
        this.style.transform = s;
    }
    this.setAttribute("rotation", d);
};

然后您可以使用它来旋转图像列表.. see (not very good :P) example here

Better Example Best Example

看起来 OP 想要更多
close-to-the-example 的情况如何？ 我认为有几个角度可能会偏离......

或click here

【讨论】：

2015 更新：不要扩展 Element.prototype，编写实用方法并传递元素。

【解决方案2】：

库只会帮助您操作 dom 和响应事件。答案在于您看待问题的方式、您将如何表示数据、您将如何处理收到的动态数据。

图像是 html 元素，因此可以像 Jose Faeti 所说的那样使用 CSS3 进行操作。现在对于动态部分，我建议你看看backbone.js (http://documentcloud.github.com/backbone/)。

简而言之，backbone.js 将帮助您将相册和图片定义为独立实体，将视图与这些数据模型挂钩 - 当新数据通过服务器通过 ajax 传入时，视图将自动适应 - 并且最重要的是，它使用jQuery进行dom选择，所以：

1) 您获得了一种很好的 OOP 方式来定义图像数据
2) 你得到了一个很好的模型-视图-视图-模型关系，可以很容易地自我更新
3) 你得到 jQuery 作为 dom 选择和操作工具

【讨论】：

【解决方案3】：

要旋转图像，您需要新的 CSS3 功能或 HTML5 新的 canvas 元素。

编写一些 JS 函数来帮助您完成轮换过程只需几分钟。

我会说最好的库是你写的。

无论如何，如果我必须选择一个，我会选择Raphael。

【讨论】：

来自网站“Raphaël 目前支持 Firefox 3.0+、Safari 3.0+、Chrome 5.0+、Opera 9.5+ 和 Internet Explorer 6.0+。”
查看网站上的示例，特别是this 用于图像旋转。在所有浏览器中都非常流畅。