Question

我想创造在桌子上放一堆图片的效果（抛出，没有特定的顺序，覆盖其他图片的图片，垂直，水平，倾斜等）以及当用户盘旋时它变得很大的图像，但我不知道如何开始。到目前为止，我所获得的是从服务器中的文件夹中自动生成的图像列表（在ul中）。有人可以给我一些关于如何完成这项工作的指示吗？

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

修改

打破项目：

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

Answer 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

如何创建抛出表格的图片效果？

1 个答案: