Tout comme la couche de masquage est dessinée, il est très simple de déterminer s'il est dessiné, mais ce n'est pas si simple ici. De plus, j'ai choisi une div plus gênante à générer au lieu d'afficher la div existante. Voici quelques points qui nécessitent une attention particulière:
1. Une fois la couche de couverture, même si la souris ne bouge pas, elle est déjà sur la couche de couverture et ne donne plus la zone Div, alors faites attention à la position de surveillance;
2. OnMouseout et OnMouseover sont tous deux déclenchés instantanément, ce qui est très important;
3. Dans les applications réelles, l'affichage des divs existants est certainement beaucoup plus efficace que la création temporaire;
Je ferais mieux de mettre le code de cette manière. En fait, l'endroit précédent n'a pas beaucoup changé. J'enregistre uniquement les modifications, c'est là que l'écouteur OnMouseout est ajouté?
var getOneDiv = function () {var div = document.createElement ("div"); div.style.position = "absolu"; div.style.display = "bloc"; div.style.zindex = "10"; div.style.background = "jaune"; div.addeventListener ("Mouseout", fonction (événement) {// je l'ai ajouté ici, et le jugement de surveillance ici est presque le même que l'entrée précédente var x = event.clientx; var y = event.clienty; Left = x-Test.offsetleft; top = y-test.offsettop; droite = test.offseft + test.offsetwidth-x; Basing = Test.Offsettop + div.style.left = test.offsetleft + "px"; if (div.offsetleft> = test.offsetleft + test.offsetwidth) {clearInterVal (ChangeWidth2); } if (le moins == 3) {} if (inférieur == 4) {// Connectez-vous à gauche, largeur en tant que variable globale, cette fois, il réduit constamment div.style.left = test.offsetleft + "px"; div.style.top = test.offsettop + "px"; div.style.height = test.offsetheight + "px"; div.style.width = width + "px"; var changeWidth1 = setInterval (function () {if (div.offsetWidth <= 0) {ClearInterval (ChangeWidth1); check = true; // c'est aussi plus critique} else {width = width-10; div.style.width = width + "px";}}, 30); }}) return div; }De cette façon, l'effet du marquage et de l'entrée est réalisé. Si vous le regardez simplement, il est en effet en forme. Cependant, il faut dire qu'il s'agit d'une implémentation extrêmement maladroite. Combien de points n'ont pas encore été ajoutés et combien de situations n'ont pas été prises en compte. De plus, l'écriture répétée de ce code, l'optimisation et l'optimisation, NOO ...