jQuery: Mouseenter-Ereignis und Mouseleave-Ereignis verursachen Flackerprobleme-js-Tutorial-php.cn

jQuery: Mouseenter-Ereignis und Mouseleave-Ereignis verursachen Flackerprobleme

黄舟

Freigeben： 2017-06-28 10:11:03

Original

3347 Leute haben es durchsucht

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

Der Grund für das Flackern ist wie folgt:

Sie haben das Mouseenter-Mouseleave-Ereignis an img

< gebunden 🎜 >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>

Nach dem Login kopieren

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 200px;
  background: red;
  opacity: 0.5;
  z-index: 3;
}

Nach dem Login kopieren

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的上面
    });

Nach dem Login kopieren

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!