如何創建在表中引發圖片的效果？

我想創建表中有一堆圖片的效果（拋出，沒有特定的順序，覆蓋其他圖片的圖片，垂直，水平，傾斜等），以及當用戶懸停在形象變得很大，但我不知道如何開始。到目前爲止，我所獲得的圖像列表是自動生成的（在ul之內）。任何人都可以給我一些關於如何完成這個任務的指針？如何創建在表中引發圖片的效果？

我的問題是如何做到這一點？我從來沒有像這樣做過任何遠程效果，或者總是搜索插件，但我想自己做這個。

編輯

打破該項目：從文件夾

加載圖片（這部分我已經做）
顯示他們隨機在瀏覽器上（我不知道如何使圖像看起來好像是一堆照片扔進一張桌子，沒有組織，有些放在另一張桌子上，以不同的角度旋轉），這是我遇到更多麻煩的地方。
讓圖像在懸停時增大到較大。（我可以做到這一點）
如果點擊，圖像顯示一些額外的信息（這我不確定，但我猜我會加入一個div，只是動態地填充點擊圖像的信息）？

來源

2011-08-29 Tsundoku

究竟做什麼你有問題？如果你遇到任何問題，你應該把項目分解成幾部分，並提出具體的問題。 – JJJ

偉大的建議我分解了一下，也許更多？ – Tsundoku

聽起來像你有一些想法如何開始。對於圖像的隨機性，您可以嘗試循環顯示每個圖像並獲取隨機位置，旋轉角度和z-index。我建議潛水並嘗試不同的事情，這是學習的最佳方式。 – Jack

這是我的版本的「拋出」的效果：

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

來源

2011-08-29 13:57:40 Teneff

真棒！謝謝！真的幫助了我=） – Tsundoku

如何創建在表中引發圖片的效果？

回答

相關問題