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 回答