Tutorial zum Erzielen eines Vergrößerungseffekts bei jQuery-Mausbewegungsbildern

In diesem Artikel wird hauptsächlich die jQuery-Mausbewegung vorgestellt, um den Vergrößerungseffekt auf Bildern zu erzielen. Ich hoffe, dass er allen helfen kann.

Zuallererst müssen Bilder auf der Benutzeroberfläche vorhanden sein

<img id="big-circle" src="images/pic2.jpg" alt=""/>其次在script代码段中加入如下代码，进行适量修改即可
$(document).ready(function () {
     var x = 10;
     var y = 20;
     $("#big-circle").mouseover(function (e) {
       var tooTip = "<p id=&#39;tooTip&#39;><img src=&#39;" + this.href + "&#39;></img><p>";
       $("body").append(tooTip);
       $("#tooTip").css({ position: "absolute",
         &#39;top&#39;: (e.pageY + y) + "px", "left": (e.pageX + x) + "px"
       }).show("fast");
     }).mouseout(function () {
             $("#tooTip").remove();
     }).mousemove(function (e) {
       $("#tooTip").css({ position: "absolute",
         &#39;top&#39;: (e.pageY + y) + "px", "left": (e.pageX + x) + "px"
       });
     });
   });

Verwandte Empfehlungen:

JS-Imitation der Alipay-Eingabe Eingabe und Anzeige einer digitalen Lupe

Ein Beispiel für JavaScript, das Taobao imitiert, um einen Lupeneffekt zu erzielen

JS implementiert e -Commerce-Touch-Vergrößerungseffekt

Das obige ist der detaillierte Inhalt vonTutorial zum Erzielen eines Vergrößerungseffekts bei jQuery-Mausbewegungsbildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!