2011-09-09 14 views
24

ウェブページでは、アルバムのリストを表示したいのですが、各アルバム名の隣に重ねて写真を重ねて表示します。複数の写真をJavaScriptの上に重ねて表示する方法

picture of images stack atop one another

+0

動的に写真のリストを取ると言うと、それらはどこにありますか?から。私はCSSで順序付けられていないリスト内のimg要素を積み重ねることは非常に簡単だと思いますが、コードのサンプルなしでは言い難いです –

+0

@muは、スタックを持つアルバムを表示するほとんどのツールそのアルバムの画像のうち、 – leora

+0

@muは短すぎます。私は何をしようとしているのかを例にしています。 – leora

答えて

51

なぜだけではなく、ものを構築:動的画像のリストを取るために、それらをここでお互い

の上に積み重ねてきた最良の方法は、例えば、何されているのですか?それは難しくないでしょう。ここでsee (not very good :P) example here

Better Example Best Example

...あなたがイメージのリストを回転させることに使用することができます(書き込みに多分5分かかった)

Element.prototype.rotate = function(d) { 
    var s = "rotate(" + d + "deg)"; 
    if (this.style) { // regular DOM Object 
     this.style.MozTransform = s; 
     this.style.WebkitTransform = s; 
     this.style.OTransform = s; 
     this.style.transform = s; 
    } 
    this.setAttribute("rotation", d); 
}; 

私が働いてきた小さな回転のプロトタイプであります


OPはこれが近いためであるどのようにより
を望んでいるように見えます - 例 -
私はいくつかの角度はあなたがHTML5に新しい、新しいCSS3の機能やcanvas要素を必要とするいずれかの画像を回転させるには、オフ... Example Output

それともclick here

+0

2015 update:Element.prototypeを拡張したり、ユーティリティメソッドを記述したり、要素を渡したりしないでください。 – rlemon

6

かもしれないと思います。

回転処理に役立ついくつかのJS関数を書くことは、ほんの数分です。

私はあなたが書いたものが最良のライブラリだと言います。

とにかく、1つを選択しなければならない場合は、Raphaelを選択します。

+0

あなたの例はすべてのブラウザで動作しますか? – leora

+0

ウェブサイトから「Raphaëlは現在Firefox 3.0以降、Safari 3.0+、Chrome 5.0+、Opera 9.5+、Internet Explorer 6.0+」をサポートしています。 –

+0

ウェブサイトの例、特に[this](http://raphaeljs.com/image-rotation.html)で画像の回転を確認してください。すべてのブラウザで本当に流動的です。 –

2

ライブラリはDOMの操作とイベントへの応答に役立ちます。答えは、問題がどのように表示されるか、データをどのように表現するか、どのように動的データを処理するかにあります。

イメージはhtml要素なので、CSS3で操作することができます。たとえば、Jose Faetiのように。今度は動的部分については、backbone.js(http://documentcloud.github.com/backbone/)をご覧ください。

backbone.jsは、スタンドアロンエンティティとしてアルバムや画像を定義し、そのデータモデルにビューをフックします。サーバーからの新しいデータがajax経由で自動的に適用されるビューです。それはとても、DOMの選択のためのjQueryを使用しています。

1)あなたはあなたのイメージデータ
2を定義する素敵なOOPっぽいアプローチを得る)あなたは簡単に
を自分自身をアップデート素敵なモデル - ビュービューモデルの関係を取得します 3)dom選択と操作ツールとしてjQueryを取得する

関連する問題