Verwenden Sie jquery, um den Lupeneffekt_jquery zu erzielen-js-Tutorial-php.cn

Umsetzungsprinzip

Erklären wir zunächst, wie Sie den Lupeneffekt erzielen:

Methode 1: Bereiten Sie ein großes Bild mit hohen Pixeln vor. Wenn die Maus auf dem Originalbild platziert ist, laden Sie die entsprechende Position des großen Bildes und zeigen Sie sie an.

Methode 2: Vergrößern Sie das Originalbild, d. h. passen Sie die Länge und Breite des Originalbilds an.

Oben haben wir zwei Methoden vorgestellt, um den Lupeneffekt zu erzielen. Als nächstes wenden wir die beiden oben genannten Methoden auf unser jQuery-Plug-in an.

Zunächst benötigen wir ein img-Element, um das ursprüngliche Bildobjekt anzuzeigen, und einen Container als Anzeigefeld, in dem das große Bildobjekt gespeichert wird. Wenn die Maus über das Originalbild fährt, wird der entsprechende Teil durch absolute Positionierung des großen Bildes angezeigt, wodurch ein lupenähnlicher Effekt erzielt wird.

Als nächstes definieren wir die Seite Index.html. Die spezifische Implementierung lautet wie folgt:

<!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>

Nach dem Login kopieren

CSS-Stil:

.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; }

Nach dem Login kopieren

Mousemove-Ereignis
Als nächstes verwenden wir das jQuery-Plugin, um den Lupeneffekt zu erzielen. Wenn sich die Maus über das kleine Objekt bewegt, wird die entsprechende Position des großen Bildes im großen Objekt angezeigt. Dies beinhaltet das Mousemove-Ereignis Wir müssen die Listening-Methode für das Mousemove-Ereignis implementieren.

Jquery.imagezoom.js-Plugin implementieren:

(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);

Nach dem Login kopieren

Hinweis: Wenn sich die Maus zum Vergrößerungsobjekt bewegt, müssen wir die relative Koordinatenposition der Maus ermitteln. Hier definieren wir die relativen Koordinaten als (mx, my). relative Koordinaten sind gleich (pageX - offsetLeft, pageY - offsetTop).

Jetzt haben wir den Koordinatenwert der Maus im Vergrößerungsobjekt erhalten. Als nächstes müssen wir die entsprechenden Koordinaten des großen Bildes ermitteln. Wir können die proportionale Beziehung verwenden, um den Wert von (rx,ry) zu ermitteln.

mx / small.width (Breite des Originalbildes) = rx / native_width (Breite des großen Bildes)

my / small.height (Länge des Originalbildes) = ry / native_height (Länge des großen Bildes)

Durch die obige proportionale Beziehung wissen wir, dass die Koordinaten (rx, ry) des großen Bildes gleich (mx/small.widthnative_width, my/small.heightnative_height) sind.

Mausrad-Event
Zuvor haben wir das Mousemove-Ereignis verwendet, um das Bild zu vergrößern. Hier verwenden wir das Mausrad-Ereignis, um den Bildvergrößerungseffekt zu erzielen.

Weil verschiedene Browser unterschiedliche Scrollrad-Ereignisse haben. Es gibt drei Haupttypen: onmousewheel (IE 6/7/8), Mousewheel (IE9, Chrome, Safari und Opera) und DOMMouseScroll (nur von Firefox unterstützt). Diese drei Ereignisse werden hier nicht im Detail vorgestellt.

Aufgrund der Unterschiede zwischen verschiedenen Browsern müssen wir die oben genannten drei Radereignisse (Onmousewheel, Mousewheel und DOMMouseScroll) überwachen, um die Kompatibilität zwischen den Browsern zu erreichen. Die spezifische Implementierung ist wie folgt:

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

Nach dem Login kopieren

Oben haben wir eine Methode zum Abhören von Radereignissen implementiert, die mit verschiedenen Browsern kompatibel ist. Als nächstes müssen wir bei der Beurteilung, ob das Rad oben oder unten ist, auch die Kompatibilität verschiedener Mainstream-Browser (IE, Opera, Safari) berücksichtigen , Firefox, In Chrome) verwendet Firefox „detail“, und die anderen vier Kategorien verwenden „wheelDelta“; ±3 und WheelDelta benötigt nur ±120, wobei positive Zahlen für Aufwärts und negative Zahlen für Abwärts stehen.

Da sowohl Detail als auch WheelDelta zwei Werte haben, die das Scrollen nach oben oder unten angeben, kann die Kompatibilität zwischen verschiedenen Browsern auf folgende Weise erreicht werden:

$(".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)));
});

Nach dem Login kopieren

Oben haben wir uns mit verschiedenen Browser-Radüberwachungsmethoden befasst. Wenn der Benutzer das Rad scrollt, muss die Größe des Originalbilds dynamisch geändert werden. Hier definieren wir das Skalierungsverhältnis als 0,3, was bedeutet, dass der Benutzer jedes Mal Wenn Sie das Rad drehen, wird das Originalbild entsprechend dem Verhältnis 0,3 skaliert. Die spezifische Implementierung ist wie folgt:

// 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");

Nach dem Login kopieren

Oben haben wir einen Lupeneffekt implementiert. Wenn wir mit der Maus über das Bild fahren, wird der entsprechende Teil des Bildes automatisch vergrößert. Natürlich können wir das Vergrößerungsverhältnis über das Scrollrad anpassen.

Referenz

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

Nach dem Login kopieren