異なるオーバーレイ ID を処理する方法: 同じ JavaScript 関数を使用する
<p>さまざまなリンクのオーバーレイを表示したいと考えています。最初のオーバーレイには画像とテキストが含まれていますが、リンク 2 をクリックすると、同じ構造で異なるコンテンツを持つオーバーレイ 2 が表示されます。希望の出力を得るのを手伝ってください。 </p>
<p>
<pre class="brush:js;toolbar:false;">function on() {
document.getElementById("オーバーレイ").style.display = "ブロック";
}
関数 on1() {
document.getElementById("overlay1").style.display = "ブロック";
}
関数オフ() {
document.getElementById("オーバーレイ").style.display = "なし";
}</pre>
<pre class="ブラシ:css;ツールバー:false;">.img {
トランジション: トランスフォーム 5 秒のイーズインアウト。
変換: スケール(1);
変換元: 0 0;
}
.img:ホバー {
変換: スケール(1.25)
}
＃かぶせる、
#オーバーレイ1 {
位置: 固定;
表示: なし。
幅: 100%;
高さ: 100%;
トップ: 0;
左: 0;
右: 0;
下: 0;
背景色: 白;
z インデックス: 77777772;
カーソル: ポインタ;
}
＃文章、
＃テキスト 1 {
位置: 固定;
トップ: 20%;
左: 5%。
//フォントサイズ: 50px;
色: 黒;
// 変換:translate(-50%,-50%);
// -ms-transform:translate(-50%,-50%);
}</pre>
<pre class="brush:html;toolbar:false;"><div id="overlay" onclick="off()">
<div id="テキスト">
<div style="width: 48%; float:left">
<h2>XXX</h2>
<h4>ZZZ</h4>
<p style="font-size:14px;">
渓谷に住む人々の計り知れない才能を発見するのに協力してください。 </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
「＞
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/boydB3_6881-683x1024.jpg">
</div>
</div>
<div style="padding:20px">
<a onclick="on()"></a>
</div>
<div id="overlay1" onclick="on1()">
<div id="text1">
<div style="width: 48%; float:left">
AAA
<h4>MMM</h4>
<p style="font-size:14px;">渓谷に住む人々の計り知れない才能を発見するのに協力してください。 </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
「＞
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/002boydB37683-703x1024.jpg">
</div>
</div>
<div style="padding:20px">
<a onclick="on1()"></a>
</div>
</div>
</div>
<a onclick="on(id)"style="font-size: 11pt;">続きを読む -></a>
<a onclick="on(id)"style="font-size: 11pt;">続きを読む -></a>
1. 項目をリストします</pre>
</p>
