Façon de gérer différents ID de superposition : utilisez la même fonction JavaScript
P粉511757848
P粉511757848 2023-09-04 22:36:35
0
1
461
<p>Je souhaite afficher des superpositions pour différents liens. La première superposition contient une image et du texte, tandis que si l'on clique sur le lien 2, elle doit afficher la superposition 2 avec la même structure mais un contenu différent. S'il vous plaît, aidez-moi à obtenir le résultat souhaité. </p> <p> <pre class="brush:js;toolbar:false;">fonction on() { document.getElementById("overlay").style.display = "block"; } fonction on1() { document.getElementById("overlay1").style.display = "block"; } fonction désactivée() { document.getElementById("overlay").style.display = "aucun"; }</pré> <pre class="brush:css;toolbar:false;">.img { transition : transformer les 5 s en une entrée-sortie facile ; transformation : échelle(1); origine de transformation : 0 0 ; } .img: survoler { transformation : échelle (1,25) } #recouvrir, #superposition1 { poste : fixe ; affichage : aucun ; largeur : 100 % ; hauteur : 100 % ; haut : 0 ; gauche : 0 ; à droite : 0 ; bas : 0 ; couleur de fond : blanc ; indice z : 77777772 ; curseur : pointeur ; } #texte, #texte 1 { poste : fixe ; haut : 20 % ; gauche : 5 % ; // taille de police : 50 px ; la couleur noire; // transformation : traduire(-50%,-50%); // -ms-transform : traduire (-50%,-50%); }</pré> <pre class="brush:html;toolbar:false;"><div id="overlay" onclick="off()"> <div id="text"> <div style="largeur : 48 %; float:left"> <h2>XXX</h2> <h4>ZZZ</h4> <p style="font-size:14px;"> Faites découvrir les immenses talents des gens qui vivent dans la vallée. </p> </div> <div style="largeur : 50 %; float:right; margin-top:-220px; "> <img class="img" style="hauteur:100%" src="http://cdn.dpmag.com/2016/06/boydB3_6881-683x1024.jpg"> </div> </div> <div style="padding:20px"> <h2></h2> <a onclick="on()"></a> </div> <div id="overlay1" onclick="on1()"> <div id="text1"> <div style="largeur : 48 %; float:left"> <h2>AAA</h2> <h4>MMM</h4> <p style="font-size:14px;">Faites découvrir les immenses talents des habitants de la vallée. </p> </div> <div style="largeur : 50 %; float:right; margin-top:-220px; "> <img class="img" style="hauteur:100%" src="http://cdn.dpmag.com/2016/06/002boydB37683-703x1024.jpg"> </div> </div> <div style="padding:20px"> <h2></h2> <a onclick="on1()"></a> </div> </div> </div> <a onclick="on(id)"style="font-size: 11pt;">En savoir plus -></a> <a onclick="on(id)"style="font-size: 11pt;">En savoir plus -></a> 1. Liste des éléments</pre> </p>
P粉511757848
P粉511757848

répondre à tous(1)
P粉978742405

Il existe de meilleures façons de mettre en œuvre cela, mais en fonction de vos besoins, vous pouvez transmettre différents idsactions作为params à la même fonction, comme ceci

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;">阅读更多 -></a>
<a onclick="toggle('overlay', 'block')" style="font-size: 11pt;">阅读更多 -></a> 1. 列表项
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal