处理不同覆盖层ID的方法:使用相同的JavaScript函数
P粉511757848
P粉511757848 2023-09-04 22:36:35
[HTML讨论组]
<p>我想要为不同的链接显示覆盖层。第一个覆盖层包含图片和文本,而如果我们点击链接2,它必须显示具有相同结构但不同内容的覆盖层2。请帮助我获得所需的输出。</p> <p> <pre class="brush:js;toolbar:false;">function on() { document.getElementById("overlay").style.display = "block"; } function on1() { document.getElementById("overlay1").style.display = "block"; } function off() { document.getElementById("overlay").style.display = "none"; }</pre> <pre class="brush:css;toolbar:false;">.img { transition: transform 5s ease-in-out; transform: scale(1); transform-origin: 0 0; } .img:hover { transform: scale(1.25) } #overlay, #overlay1 { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: white; z-index: 77777772; cursor: pointer; } #text, #text1 { position: fixed; top: 20%; left: 5%; //font-size: 50px; color: black; // transform: translate(-50%,-50%); // -ms-transform: translate(-50%,-50%); }</pre> <pre class="brush:html;toolbar:false;">&lt;div id="overlay" onclick="off()"&gt; &lt;div id="text"&gt; &lt;div style="width: 48%; float:left"&gt; &lt;h2&gt;XXX&lt;/h2&gt; &lt;h4&gt;ZZZ&lt;/h4&gt; &lt;p style="font-size:14px;"&gt; 帮助发掘居住在山谷中的人们的巨大才华。 &lt;/p&gt; &lt;/div&gt; &lt;div style="width: 50%; float:right; margin-top:-220px; "&gt; &lt;img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/boydB3_6881-683x1024.jpg"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div style="padding:20px"&gt; &lt;h2&gt;&lt;/h2&gt; &lt;a onclick="on()"&gt;&lt;/a&gt; &lt;/div&gt; &lt;div id="overlay1" onclick="on1()"&gt; &lt;div id="text1"&gt; &lt;div style="width: 48%; float:left"&gt; &lt;h2&gt;AAA&lt;/h2&gt; &lt;h4&gt;MMM&lt;/h4&gt; &lt;p style="font-size:14px;"&gt;帮助发掘居住在山谷中的人们的巨大才华。 &lt;/p&gt; &lt;/div&gt; &lt;div style="width: 50%; float:right; margin-top:-220px; "&gt; &lt;img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/002boydB37683-703x1024.jpg"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div style="padding:20px"&gt; &lt;h2&gt;&lt;/h2&gt; &lt;a onclick="on1()"&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;a onclick="on(id)"style="font-size: 11pt;"&gt;阅读更多 -&amp;gt;&lt;/a&gt; &lt;a onclick="on(id)"style="font-size: 11pt;"&gt;阅读更多 -&amp;gt;&lt;/a&gt; 1. 列表项</pre> </p>
P粉511757848
P粉511757848

全部回复(1)
P粉978742405

有更好的方法来实现这个,但根据您的要求,您可以将不同的idsactions作为params传递给同一个函数,像这样

function on() {
  document.getElementById("overlay").style.display = "block";
}

function on1() {
  document.getElementById("overlay1").style.display = "block";
}

function off() {
  document.getElementById("overlay").style.display = "none";
}

function toggle(id, value) {
  document.getElementById(id).style.display = value;
}
.img {
  transition: transform 5s ease-in-out;
  transform: scale(1);
  transform-origin: 0 0;
}

.img:hover {
  transform: scale(1.25)
}

#overlay,
#overlay1 {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  z-index: 77777772;
  cursor: pointer;
}

#text,
#text1 {
  position: fixed;
  top: 20%;
  left: 5%;
  font-size: 50px;
  color: black;
  transform: translate(-50% -50%);
  -ms-transform: translate(-50% -50%);
}
<div id="overlay" onclick="toggle('overlay', 'none')">
  <div id="text">
    <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">
    <h2></h2>
    <a onclick="toggle('overlay', 'block')"></a>
  </div>
  <div id="overlay1" onclick="toggle('overlay1', 'block')">
    <div id="text1">
      <div style="width: 48%; float:left">
        <h2>AAA</h2>
        <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">
      <h2></h2>
      <a onclick="toggle('overlay1', 'block')"></a>
    </div>
  </div>
</div>


<a onclick="toggle('overlay', 'block')" style="font-size: 11pt;">阅读更多 -&gt;</a>
<a onclick="toggle('overlay', 'block')" style="font-size: 11pt;">阅读更多 -&gt;</a> 1. 列表项
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号