jQuery réalise la fonction de cliquer sur l'icône div pour zoomer et dézoomer en boucle-js tutoriel-php.cn

Maison

interface Web

js tutoriel

jQuery réalise la fonction de cliquer sur l'icône div pour zoomer et dézoomer en boucle

Oct 08, 2018 pm 04:37 PM

jquery

Cet article présente principalement l'implémentation par jQuery de la fonction de zoom avant et arrière circulaire consistant à cliquer sur l'icône p. Il s'agit d'une fonction très courante et basique. L'éditeur suivant vous le présentera à travers un exemple de code. s'y référer.

Une fonction très basique. Cliquez sur le bouton icône dans le coin inférieur gauche, et tout le p de la carte deviendra plus grand. Une fois l'aperçu agrandi, cliquez à nouveau sur le bouton icône, et tout le p de la carte deviendra plus petit et reviendra. à son état d'origine. Les deux icônes sont agrandies sur l'interface de la carte et effectuent un zoom arrière pour changer continuellement l'état de l'icône (flèche pointant vers l'intérieur ou flèche pointant vers l'extérieur).

image.png

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;script src=&quot;http://code.jquery.com/jquery-1.8.0.min.js&quot;&gt;&lt;/script&gt;
    &lt;style&gt;
      #scale {
        background: #FFFFFF url(&#39;../img/suo.png&#39;) no-repeat scroll 0px 0px;
        background-position: center center;
        position: absolute;
        left: 3%;
        bottom: 40%;
        width: 26px;
        height: 26px;
      }
      #scale.current {
        background: #FFFFFF url(&quot;../img/fang.png&quot;) no-repeat scroll 0px 0px;
        background-position: center center;
      }
      #updmap {
        border: 1px solid #1E90FF;
        width: 400px;
        height: 200px
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p id=&quot;scale&quot; style=&quot;&quot;&gt;&lt;/p&gt;
    &lt;p id=&quot;updmap&quot;&gt;
    &lt;/p&gt;
  &lt;/body&gt;
  &lt;script&gt;
    $(&quot;#scale&quot;).toggle(function() {
      $(this).toggleClass(&quot;current&quot;);
      $(&quot;#updmap&quot;).css({
        &quot;width&quot;: &quot;950px&quot;,
        &quot;height&quot;: &quot;400px&quot;,
      });
    }, function() {
      $(this).toggleClass(&quot;current&quot;);
      $(&quot;#updmap&quot;).css({
        &quot;width&quot;: &quot;400px&quot;,
        &quot;height&quot;: &quot;200px&quot;,
      });
    });
  &lt;/script&gt;
&lt;/html&gt;

Copier après la connexion

Résumé

Ce qui précède est l'implémentation jQuery introduite par l'éditeur pour réaliser la fonction de zoom avant et arrière en cliquant sur l'icône p. J'espère que cela sera utile à tout le monde.

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 de ce site Web

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