複数の写真をJavaScriptの上に重ねて表示する方法

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

picture of images stack atop one another

出典

2011-09-09 leora

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

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

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

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

の上に積み重ねてきた最良の方法は、例えば、何されているのですか？それは難しくないでしょう。ここで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

出典

2011-09-14 17:36:51 rlemon

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

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

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

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

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

出典

2011-09-14 18:59:52

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

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

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

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

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

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

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

出典

2011-09-15 09:58:01

複数の写真をJavaScriptの上に重ねて表示する方法

答えて

関連する問題