recherche

Maison  >  Article  >  interface Web  >  Partager comment utiliser le plug-in de zoom d'image jQuery smartZoom

Partager comment utiliser le plug-in de zoom d'image jQuery smartZoom

小云云
小云云original
2017-12-29 13:43:533171parcourir

Plug-in e-smart-zoom-jquery.js, cet article présente brièvement l'utilisation du plug-in de zoom d'image jQuery smartZoom et les solutions aux problèmes rencontrés via un exemple de code. Il est très bon et a une valeur de référence Friends. ceux qui en ont besoin peuvent s'y référer. Eh bien, j'espère que cela aidera tout le monde.

Description du plug-in : En passant la souris sur l'image et en faisant tourner la molette de la souris, vous pouvez zoomer ou dézoomer sur l'image.

utilisation de smartZoom

Par exemple, le code ci-dessus : 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>joannau</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .imgCon {
      width: 800px;
      height: 500px;
      margin: 40px auto;
      border: 2px solid #000;
    }
    .imgp {
      width: 100%;
      height: 100%;
    }
    .imgCon img{
      width: 100%;
    }
  </style>
</head>
<body>
<p class="imgCon">
  <p class="imgp">
    <img src="./assets/zoomSmall.jpg" alt="">
  </p>
</p>
<script src="../src/jquery-1.11.0.min.js"></script>
<script src="../src/e-smart-zoom-jquery.js"></script>
<script>
  $(function () {
    $(".imgCon img").smartZoom()
  })
</script>
</body>
</html>

Utilisez simplement la méthode smartZoom directement sur l'objet img.

Voir l'effet :

Zoom

Parfait, cela a été utilisé avec succès.

Mais de nombreuses personnes rencontreront le problème du décalage de position de l'image lors de l'utilisation de smartZoom. L'effet est le suivant :

La bordure est manquante. en revoyant le code, vous trouverez :

Il s'avère que le haut et la gauche causent des problèmes. La clé pour résoudre le problème à ce stade est d'imbriquer un conteneur p en dehors de l'image img. Comme suit : 

<p class="imgp">
    <img src="./assets/zoomSmall.jpg" alt="">
  </p>

À ce stade, le problème de décalage de position peut être résolu.

Autres API :

// 方法中可以通过设置top，left等参数来指定图片初始参数；
$(".imgCon img").smartZoom({
      'left': '50px'
    })
// 通过传入‘destroy‘来取消缩放；
 $(".imgCon img").smartZoom('destroy')

Recommandations associées :

Partage de technologie de production de l'onglet de développement de plug-in Jquery

Explication détaillée du plug-in jquery jquery.viewport.js

Explication détaillée de l'utilisation et de la fermeture du plug-in jQuery artDialog.js

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：Exemple détaillé d'implémentation d'un effet d'animation de porte coulissante d'image basé sur jQueryArticle suivant：Exemple détaillé d'implémentation d'un effet d'animation de porte coulissante d'image basé sur jQuery

Articles Liés

Voir plus