recherche

Maison >interface Web >js tutoriel >Utilisez jquery pour obtenir un effet de loupe_jquery

Utilisez jquery pour obtenir un effet de loupe_jquery

WBOY
WBOYoriginal
2016-05-16 16:38:001577parcourir

Principe de mise en œuvre

Tout d’abord, expliquons comment obtenir l’effet loupe :

Méthode 1 : Préparez une grande image avec des pixels élevés. Lorsque la souris est placée sur l'image d'origine, chargez et affichez la position correspondante de la grande image.

Méthode 2 : Agrandissez l'image originale, c'est-à-dire ajustez la longueur et la largeur de l'image originale.

Ci-dessus, nous avons présenté deux méthodes pour obtenir l'effet loupe. Ensuite, nous appliquons les deux méthodes ci-dessus à notre plug-in jQuery.

Tout d'abord, nous avons besoin d'un élément img pour afficher l'objet image d'origine, et d'un conteneur comme boîte d'affichage ; le grand objet image est stocké dans la boîte d'affichage. Lorsque la souris se déplace sur l'image originale, la partie correspondante est affichée par positionnement absolu de la grande image, obtenant un effet de loupe.

Ensuite, définissons la page Index.html, l'implémentation spécifique est la suivante : 

<!DOCTYPE html>
<html>
<head>
<title>放大镜效果</title>
<meta charset="utf-8"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<link type="text/css" rel="stylesheet" href="css/reset.css"/>
<link type="text/css" rel="stylesheet" href="css/main.css"/>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery.imageZoom.js"></script>


</head>
<body> 
<div class="magnify">
<div class="large"></div>
<img class="small" src="images/iphone.jpg" width="200" />
</div>

<div class="magnify_02">
<div class="large_02"></div>
<img class="small_02" src="images/img5.jpg" width="400"/>
</div>
<script type="text/javascript">
$(function(){

  $(".magnify").hover(function(){
      $.fn.imageZoom({
    small :"small",
    large : "large",
    magnify: "magnify"
    });

  },function(){})

  $(".magnify_02").hover(function(){
    $.fn.imageZoom({
    small : "small_02",
    large : "large_02",
    magnify: "magnify_02"
    });

  },function(){})

})
</script>
</body>
</html>

style CSS : 

.magnify {width: 200px; margin: 50px auto; position: relative;}
.large {width: 175px; height: 175px;position: absolute;border-radius: 100%;z-index:99;box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);background: url('../images/iphone.jpg') no-repeat;display: none;}
.small { display: block; }

.magnify_02 {width: 400px; margin: 50px auto; position: relative;}
.large_02 {width: 175px; height: 175px;position: absolute;border-radius: 100%;z-index:99;box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);background: url('../images/iphone.jpg') no-repeat;display: none;}
.small_02 { display: block; }

événement mousemove
Ensuite, nous utilisons le plug-in jQuery pour obtenir l'effet de loupe. Lorsque la souris se déplace sur le petit objet, la position correspondante de la grande image sera affichée dans le grand objet. Cela implique l'événement mousemove. nous avons besoin d'implémenter la méthode d'écoute pour l'événement mousemove.

Implémenter le plug-in jquery.imagezoom.js : 

(function($) {

  $.fn.imageZoom = function(options) {

    var defaults = {
      scaling: 0.3,
      small :"small",
      large : "large",
      magnify:"magnify"


    };

    options = $.extend(defaults, options),
      native_width = 0,
      native_height = 0,
      current_width = 0,
      current_height = 0,

       magnify="."+options.magnify;

       small="."+options.small;
       $small=$(small);

       large="."+options.large;
       $large=$(large);

     $(magnify).mousemove(function(e) {

        var image_object = new Image();

        image_object.src = $small.attr('src');

      if(!+[1,]) {

        native_height = image_object.height;

        native_width = image_object.width; 

        } 
        else {
          image_object.onload = function() {  
          image_object.onload = null;
          native_height = image_object.height;
          native_width = image_object.width;
          }
        }
        current_height = $small.height();
        current_width = $small.width();
        var magnify_offset = $(this).offset();
        var mx = e.pageX - magnify_offset.left;
        var my = e.pageY - magnify_offset.top;

        if (mx < $(this).width() && my <$(this).height() && mx > 0 && my > 0) {

          $large.fadeIn(100);

        } else {
          $large.fadeOut(100);
        }
        if ($large.is(":visible")) {
          var rx = Math.round(mx / $small.width() * native_width - $large.width() / 2) * -1,
            ry = Math.round(my / $small.height() * native_height - $large.height() / 2) * -1,
            bgp = rx + "px " + ry + "px",
            px = mx - $large.width() / 2,
            py = my - $large.height() / 2;
          $large.css({
            left: px,
            top: py,
            backgroundPosition: bgp
          });
        }

      //}
    });
  };
})(jQuery);

Remarque : lorsque la souris se déplace vers l'objet agrandi, nous devons obtenir la position des coordonnées relatives de la souris dans l'agrandissement. Ici, nous définissons les coordonnées relatives comme (mx, my). les coordonnées relatives sont égales à (pageX - offsetLeft , pageY - offsetTop).

Maintenant, nous avons obtenu la valeur des coordonnées de la souris dans l'objet agrandi. Ensuite, nous devons obtenir les coordonnées correspondantes de la grande image comme (rx, ry). Nous pouvons utiliser la relation proportionnelle pour obtenir la valeur de (rx,ry).

mx / small.width (largeur de l'image originale) = rx / native_width (largeur de la grande image)

my / small.height (longueur de l'image originale) = ry / native_height (longueur de la grande image)

Grâce à la relation proportionnelle ci-dessus, nous savons que les coordonnées (rx, ry) de la grande image sont égales à (mx/small.widthnative_width, my/small.heightnative_height).

événement de la molette de la souris
 Plus tôt, nous avons utilisé l'événement mousemove pour agrandir l'image. Ici, nous utiliserons l'événement molette de la souris pour obtenir l'effet d'agrandissement de l'image.

Parce que différents navigateurs ont des événements de molette de défilement différents. Il en existe trois types principaux : onmousewheel (IE 6/7/8), mousewheel (IE9, Chrome, Safari et Opera) et DOMMouseScroll (uniquement supporté par Firefox). Ces trois événements ne seront pas présentés en détail ici.

En raison des différences entre les différents navigateurs, afin d'assurer la compatibilité entre les navigateurs, nous devons surveiller les événements à trois roues ci-dessus (onmousewheel, mousewheel et DOMMouseScroll). L'implémentation spécifique est la suivante : 

$(".magnify").bind('DOMMouseScroll mousewheel onmousewheel', function(e) {
});

Ci-dessus, nous avons implémenté une méthode d'écoute des événements de roue qui est compatible avec différents navigateurs. Ensuite, pour juger si la roue est haute ou basse, nous devons également prendre en compte la compatibilité des différents navigateurs grand public (IE, Opera, Safari. , Firefox, In Chrome), Firefox utilise le détail et les quatre autres catégories utilisent wheelDelta ; les deux ne sont incohérentes que dans leurs valeurs, ce qui signifie qu'elles ont la même signification et wheelDelta ne prennent que deux valeurs chacune, le détail ne prend que deux valeurs. ±3, et wheelDelta ne prend que ±120, où les nombres positifs représentent la hausse et les nombres négatifs représentent la baisse.

Étant donné que detail et wheelDelta ont deux valeurs indiquant un défilement vers le haut ou vers le bas, la compatibilité entre les différents navigateurs peut être obtenue des manières suivantes. L'implémentation spécifique est la suivante :

. 
$(".magnify").bind('DOMMouseScroll mousewheel onmousewheel', function(e) {

  // cross-browser wheel delta
  var e = window.event || e; // old IE support.
  var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
});

Ci-dessus, nous avons traité de différentes méthodes de surveillance de la molette du navigateur. Lorsque l'utilisateur fait défiler la molette, la taille de l'image originale doit être modifiée dynamiquement. Ici, nous définissons le rapport de mise à l'échelle sur 0,3, ce qui signifie qu'à chaque fois l'utilisateur. fait rouler la roue, l'image originale est juste à l'échelle selon le rapport de 0,3. La mise en œuvre spécifique est la suivante :

. 
// Gets the image scaling height and width.
native_height += (native_height * scaling * delta);
native_width += (native_width * scaling * delta);

// Update backgroud image size.
$large.css('background-size', native_width + "px " + native_height + "px");

Ci-dessus, nous avons implémenté un effet de loupe. Lorsque nous passons la souris sur l'image, la partie correspondante de l'image sera automatiquement agrandie. Bien entendu, nous pouvons ajuster le taux de grossissement grâce à la molette de défilement.

Référence

http://tech.pro/tutorial/681/css-tutorial-the-background-position-property
http://www.sitepoint.com/html5-javascript-mouse-wheel/
http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3

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：Méthode JavaScript pour déterminer les compétences de type_javascript en matière de téléchargement de fichiersArticle suivant：Méthode JavaScript pour déterminer les compétences de type_javascript en matière de téléchargement de fichiers

Articles Liés

Voir plus