Maison > Article > interface Web > Cas d'implémentation des effets de pliage et de dépliage IE6 compatibles JavaScript

Cas d'implémentation des effets de pliage et de dépliage IE6 compatibles JavaScript

黄舟original: 2017-09-22 09:42:341565parcourir

Cet article présente principalement JavaScript pour implémenter des effets de pliage et de dépliage compatibles IE6. Il analyse la réponse aux événements JavaScript et les techniques d'implémentation liées aux opérations dynamiques pour les attributs d'élément de page sur la base d'exemples spécifiques. Les amis dans le besoin peuvent s'y référer

L'exemple de cet article décrit comment JavaScript implémente les effets de pliage et de dépliage compatibles avec IE6. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

L'effet d'effondrement en lui-même n'est pas difficile, mais si p dépasse la hauteur ne doit pas être jugé par innerHTML. Lors de la réduction, mettez le innerHTML de tous p dans. une variable Ensuite, le contenu d'une variable est intercepté et mis dans p. Ce qui suit fournit une méthode pour déterminer si p est trop élevé sur la base de la hauteur inhérente de p lui-même. S'il est trop élevé, un bouton pliable est fourni.

La hauteur de p est jugée par

document.getElementById("p's id").offsetHeight Même si le contenu de ce p est affiché via le backend, document.getElementById. ( "p's id").offsetHeight peut également obtenir la hauteur finale de p, comme le code suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>p折叠效果</title>
</head>
<body>
<p id="fold" style="border:1px #000 solid;height:100px;overflow:hidden">
  <?php
    echo "<p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p>";
  ?>
</p>
</body>
</html>
<script>
  alert(document.getElementById("fold").offsetHeight);
</script>

Le résultat courant est le suivant :

Ensuite, je peux faire un problème basé sur la hauteur de p. Créez l'effet suivant :

La disposition HTML est la suivante : utilisez un p avec l'identifiant de Fold pour plier le contenu que vous souhaitez réduire ou développer. Après cela, placez un bouton d'une largeur de 100 % dans le p avec l'identifiant du pli, et définissez un bouton avec l'identifiant de more_btn, car le script commence à juger lors du chargement de la page Web, la hauteur du p avec le id du pli, si l'identifiant est La hauteur du p du pli est trop petite, il n'est donc pas nécessaire d'afficher le bouton avec l'ID more_btn. En même temps, placez le contenu p et le bouton à l'intérieur d'un p.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>p折叠效果</title>
  </head>
  <body>
    <p style="border:1px #000 solid;">
      <p id="fold">
        <p>占位置</p><p>占位置</p><p>占位置</p><p>占位置</p><p>占位置</p><p>占位置</p>
        <p>占位置</p><p>占位置</p><p>占位置</p><p>占位置</p><p>占位置</p><p>占位置</p>
      </p>
      <button id="more_btn" style="width:100%" onclick="showmore(this)">查看更多</button>
    </p>
  </body>
</html>

La clé est le script de page Web suivant, qui est divisé en deux parties. Une partie est la partie de chargement de la page Web, qui est utilisée pour gérer si le. Le bouton est affiché ou non, et si le p est plié. Une autre partie est l'événement de clic sur le bouton Showmore.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：La signification de la limitation des fonctions et de l'anti-tremblementArticle suivant：La signification de la limitation des fonctions et de l'anti-tremblement

Articles Liés

Voir plus