0

同時に異なるタブで画像をズームする方法はありますか？タブにズーム効果を加えてみました。

ここで

そして、getElementById関数を使用しました。これを使用しているにもかかわらず、すべての画像を同時にズームする必要があります。

getElementsByClassNameを使おうとしましたが、機能しませんでした。

そのタブをクリックしながらそのpicタグにIDを動的に設定することでこれを適用する方法はありますか？（この場合、個別にズームしても問題ありません）

ここでもズーム機能でIDを渡そうとしましたが、別のタブでズームインしているときにエラーが発生しますBIN

4

1 に答える 1

1

異なるIDのdivに画像を保存する必要があります。1ページに同じIDを持つ要素は1つだけにすることができます。次のように、どのタブを表示しているかを判別する関数を追加します。

var currentTab = 0;
function switchTab(tabID) {
  currentTab = tabID;
  // code to load the tab's contents here
}

function zoom() {
  var img = document.getElementById("pic"+currentTab);
  // the rest of the zoom code goes here
}

<ul>
  <li onclick="switchTab(0);">Tab 1</li>
  <li onclick="switchTab(1);">Tab 2</li>
</ul>

<img id="pic0" src="firstpic.jpg" />
<img id="pic1" src="secondpic.jpg" />

そうすると、最初の画像だけが機能するため、各画像が適切にズームされます。現在使用している画像に遅れずについていき、一意のIDを付与するだけで、問題なく機能するはずです。

この機能を示す私が作成したページへのリンクは次のとおりです。http：//mdl.fm/f/zoom.html

于 2012-12-29T06:23:35.803 に答える