如何打造图片丢在桌子上的效果？答案

【问题标题】：How to create the effect of pictures thrown in a table?如何打造图片丢在桌子上的效果？
【发布时间】：2011-08-29 13:35:42
【问题描述】：

我想创建在表格中有一堆图片的效果（丢弃，没有特定顺序，图片覆盖其他图片，垂直，水平，倾斜等）以及当用户悬停时图像变大了，但我不知道如何开始。到目前为止，我得到的是从服务器中的文件夹中自动生成的图像列表（在ul 中）。谁能给我一些关于如何完成这项工作的指导？

我的问题是如何做到这一点？我从来没有像这样远程做过任何效果，或者总是搜索插件，但我想自己做这个。

编辑

分解项目：

从文件夹加载图片（这部分我已经做了）
在浏览器上随机显示它们（我不知道如何使图像看起来像是扔在桌子上的一堆图片，杂乱无章，一些在其他之上，以不同的角度旋转）这是哪里我还有更多麻烦。
让图像在悬停时变大。（我能做到）
如果被点击，图像会显示一些额外的信息（我不确定，但我猜我会添加一个 div 并用点击的图像的信息动态填充它）？

【问题讨论】：

您到底有什么问题？如果您遇到任何问题，您应该将项目分解为多个部分并提出具体问题。
很好的建议我把它分解了一点，也许更多？
听起来您对如何开始有了一些想法。对于图像的随机性，您可以尝试遍历每个图像并获取随机位置、旋转角度和 z-index。我建议潜入并尝试不同的东西，这是最好的学习方式。
你是不是这个意思demo.marcofolio.net/polaroid_photo_viewer
@Jack，谢谢，这正是我打算做的（潜入并学习），让我检查一下。

标签： jquery image picturegallery

【解决方案1】：

这是我版本的“抛出”效果：

HTML：

<ul id="x">
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
</ul>

Javascript：

var list = document.getElementById('x');
var elements = list.getElementsByTagName('li');
for (var i=0; i<elements.length; i++) {
    // random positon between 0px and 300px
    elements[i].style.left = Math.ceil(Math.random()*300) + 'px';
    elements[i].style.top = Math.ceil(Math.random()*300)+ 'px';

    // random angle between -90 and 90 degrees
    var rot = 'rotate(' + (Math.ceil(Math.random()*180) - 90) + 'deg)';
    elements[i].innerHTML = rot;
    // Firefox rotation
    elements[i].style.MozTransform = rot;
    // Safari/Chrome rotation
    elements[i].style.WebkitTransform = rot;
    // Opera Rotation
    elements[i].style.OTransform = rot; 
    // all the rest
    elements[i].style.roration = Math.ceil(Math.random()*180) - 90;
}

jsFiddle Demo

【讨论】：