suchen

Heim  >  Artikel  >  Web-Frontend  >  jQuery: Mouseenter-Ereignis und Mouseleave-Ereignis verursachen Flackerprobleme

jQuery: Mouseenter-Ereignis und Mouseleave-Ereignis verursachen Flackerprobleme

黄舟
黄舟Original
2017-06-28 10:11:033325Durchsuche

Hallo zusammen. Heute erstelle ich ein JQuery-Plug-In für die Bildlupe. Es ähnelt der Lupe für Produktbilder auf JD.com.

Ich habe festgestellt, dass, nachdem ich Mouseenter und Mouseleave an das Bildobjekt gebunden habe, bei Bewegung der Maus auf dem Bild gleichzeitig Mouseenter und Mouseleave ausgelöst werden, was zu Flackern führt. Aber ich erwarte nicht, dass „mouseenter“ und „mouseleave“ wiederholt aufgerufen werden, auch nicht gleichzeitig. Wie kann man es lösen? Ich habe online mehrere Methoden ausprobiert, aber ohne Erfolg.

Vielen Dank euch allen. 

$.fn.magnify = function() {
    //var glassBox = options.glassBox || {};
    //var detailBox = options.detailBox || {};

    var glassBox = $(&#39;<span></span>&#39;);

    glassBox.css({
        "width": this.width() / 2 + &#39;px&#39;,
        "height": this.height() /2 + &#39;px&#39;,
        "background-color": &#39;grey&#39;,
        "position": "absolute",
        "left" : &#39;0px&#39;,
        "top": &#39;0px&#39;,
        &#39;opacity&#39;: &#39;0.2&#39;,
        &#39;display&#39;: &#39;none&#39;,
        &#39;border&#39;: &#39;1px solid blue&#39;,
        &#39;z-index&#39;: 10

    });

    $(this).after(glassBox);
    //glassBox.hide();

    var detailBox = $(&#39;<div></div>&#39;);
    var detailImage = $(&#39;<img></img>&#39;);
    
    detailBox.css({
        "width": this.width(),
        "height": this.height(),
        "display": &#39;none&#39;,
        "position": &#39;relative&#39;,
        "overflow": &#39;hidden&#39;
        //"background-color": &#39;lime&#39;
    });
    detailImage.css({
        "position": &#39;absolute&#39;
    });
    detailImage.attr("src", this.attr("src"));
    detailBox.append(detailImage);
    this.after(detailBox);


    this.mouseenter(function(event){
        //event.stopPropagation();
        glassBox.get(0).style.display = &#39;block&#39;;
        detailBox.get(0).style.display = &#39;block&#39;;
        
        

    });
    this.mouseleave(function(event){    
        //event.stopPropagation();
        if (event.relatedTarget !== "span") {
            glassBox.get(0).style.display = &#39;none&#39;;
        detailBox.get(0).style.display = &#39;none&#39;;
        }
        
    });

    this.mousemove(function(event) {
        /* Act on the event */
        var x = event.pageX - this.offsetLeft - glassBox.width() / 2;
        var y = event.pageY - this.offsetTop - glassBox.height() /2;
        if (x < 0 ) {
            x = 0;
        } else if ( x > this.offsetWidth - glassBox.width()) {
            x = this.offsetWidth - glassBox.width();
        }
        if (y < 0) {
            y = 0;
        } else if (y > this.offsetHeight - glassBox.height()) {
            y = this.offsetHeight - glassBox.height();
        }
        glassBox.css({
            left: x + &#39;px&#39;,
            top:  y + &#39;px&#39;
        });

        detailImage.css({
        "left": -3.5 * (event.pageX - this.offsetLeft) + &#39;px&#39;,
        "top": -3.5 * (event.pageY - this.offsetTop) + &#39;px&#39;
    });
    });
}

Der HTML-Code lautet wie folgt: 

<html>
    <head>
        <script src="jquery-1.11.3.js"></script>
        <script src="magnify.js"></script>
    </head>
    <style>
        #imgTarget{
            width: 300px;
            height: 200px;
        }
        #imageArea{
            position: relative;
        }
    </style>
    <body>
        <div id="imageArea">
            <img id="imgTarget" src="car.jpg"/>
        </div>

        <script>
            $( document ).ready( function(){
                $("#imgTarget").magnify();
            } );

        </script>


    </body>


</html>

Der Grund für das Flackern ist wie folgt:

Sie haben das Mouseenter-Mouseleave-Ereignis an img

mouseenter img, Sie haben eine glassBox generiert

glassBox auf der oberen Ebene von img, wodurch das img und der Mauszeiger blockiert wurden, sodass ein Mouseleave

für img generiert wurde, sodass der Code glassBox eingefügt hat display=none, die Maus kann wieder in img eintreten

Lösung 1

Anstatt Mouseenter Mouseleave zu verwenden, verwenden Sie direkt Mousemove, um zu bestimmen, ob die Mausposition innerhalb des Bereichs von img liegt.

Lösung 2

Erstellen Sie ein Overlay in der gleichen Größe wie das Bild: 

<div id="imageArea">
 <img id="imgTarget" src="card.jpg"/>
 <div id="overlay"></div>
</div>
#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 200px;
  background: red;
  opacity: 0.5;
  z-index: 3;
}
Stellen Sie die Z-Index-Reihenfolge des Bild-GlasBox-Overlays sicher: 

glassBox.css({
        "width": this.width() / 2 + &#39;px&#39;,
        "height": this.height() /2 + &#39;px&#39;,
        "background-color": &#39;grey&#39;,
        "position": "absolute",
        "left" : &#39;0px&#39;,
        "top": &#39;0px&#39;,
        &#39;opacity&#39;: &#39;0.2&#39;,
        &#39;display&#39;: &#39;none&#39;,
        &#39;border&#39;: &#39;1px solid blue&#39;,
        &#39;z-index&#39;: 2 // 保证glassBox在overlay的下面，在img的上面
    });
Ereignisse sind an das Overlay gebunden:

Das obige ist der detaillierte Inhalt vonjQuery: Mouseenter-Ereignis und Mouseleave-Ereignis verursachen Flackerprobleme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery: Behebung des Problems, dass das Mouseleave-Ereignis nicht ausgelöst werden kann, wenn sich die Maus schnell bewegtNächster Artikel：jQuery: Behebung des Problems, dass das Mouseleave-Ereignis nicht ausgelöst werden kann, wenn sich die Maus schnell bewegt

In Verbindung stehende Artikel

Mehr sehen