0

テーブルにたくさんの写真を配置する効果を作成したいと思います (捨てられた、特定の順序なし、他の写真をカバーする写真の断片、垂直、水平、ゆがみなど)。また、ユーザーが画像にカーソルを合わせると、大きくなりますが、始め方がわかりません。私がこれまでに得たulのは、サーバー内のフォルダーから (で) 自動的に生成された画像リストです。これを行う方法について、誰か私にいくつかの指針を教えてください。

私の質問は、これを行う方法ですか？私はこのような効果をリモートで行ったことがないか、常にプラグインを探していましたが、自分でやりたいと思っています。

編集

プロジェクトの内訳:

  • フォルダーから写真を読み込む (この部分は既に行っています)
  • それらをブラウザにランダムに表示します（画像をテーブルに投げ込まれた、整理されていない、他の画像の上にいくつかの画像があり、さまざまな角度で回転しているかのように表示する方法がわかりません）これは私がもっと持っている場所です問題。
  • ホバーすると画像が大きくなります。（私がすることができます）
  • クリックすると、画像に追加情報が表示されます（これはわかりませんが、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 に答える