Maison > Article > interface Web > jQuery : les événements mouseenter et mouseleave provoquent un problème de scintillement

jQuery : les événements mouseenter et mouseleave provoquent un problème de scintillement

黄舟original: 2017-06-28 10:11:033325parcourir

Bonjour à tous. Aujourd'hui, je crée un plug-in jquery pour la loupe d'image. C'est similaire à la loupe pour les photos de produits sur JD.com.

J'ai découvert qu'après avoir lié mouseenter et mouseleave à l'objet image, lorsque la souris se déplace sur l'image, mouseenter et mouseleave seront déclenchés en même temps, provoquant un scintillement. Mais je ne m'attends pas à ce que mouseenter et mouseleave soient appelés à plusieurs reprises, ni même en même temps. Comment le résoudre ? J'ai essayé plusieurs méthodes en ligne mais en vain.

Merci à tous.

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

Le code HTML est le suivant :

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

La raison du scintillement est la suivante :

Vous avez lié l'événement mouseenter mouseleave à img

mouseenter img, vous avez généré une glassBox

glassBox sur la couche supérieure d'img, bloquant ainsi l'img et le curseur de la souris, donc un mouseleave

a été généré pour img, donc le code a mis glassBox display=none, la souris peut entrer à nouveau dans img

Solution 1
Au lieu d'utiliser mouseenter mouseleave, utilisez directement mousemove pour déterminer si la position de la souris est dans la plage d'img.

Solution 2
Créer une superposition, de la même taille que l'img :

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

Garantir l'ordre z-index de la superposition img glassBox :

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

Les événements sont liés à la superposition :

$( document ).ready( function(){
    $("#overlay").magnify(); 
} );

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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：jQuery : résoudre le problème selon lequel l'événement mouseleave ne peut pas être déclenché lorsque la souris se déplace rapidementArticle suivant：jQuery : résoudre le problème selon lequel l'événement mouseleave ne peut pas être déclenché lorsque la souris se déplace rapidement

Articles Liés

Voir plus