0

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

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

编辑

分解项目：

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

1 回答 1

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 演示

于 2011-08-29T13:57:40.113 回答