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 = $('<span></span>');
glassBox.css({
"width": this.width() / 2 + 'px',
"height": this.height() /2 + 'px',
"background-color": 'grey',
"position": "absolute",
"left" : '0px',
"top": '0px',
'opacity': '0.2',
'display': 'none',
'border': '1px solid blue',
'z-index': 10
});
$(this).after(glassBox);
//glassBox.hide();
var detailBox = $('<div></div>');
var detailImage = $('<img></img>');
detailBox.css({
"width": this.width(),
"height": this.height(),
"display": 'none',
"position": 'relative',
"overflow": 'hidden'
//"background-color": 'lime'
});
detailImage.css({
"position": 'absolute'
});
detailImage.attr("src", this.attr("src"));
detailBox.append(detailImage);
this.after(detailBox);
this.mouseenter(function(event){
//event.stopPropagation();
glassBox.get(0).style.display = 'block';
detailBox.get(0).style.display = 'block';
});
this.mouseleave(function(event){
//event.stopPropagation();
if (event.relatedTarget !== "span") {
glassBox.get(0).style.display = 'none';
detailBox.get(0).style.display = 'none';
}
});
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 + 'px',
top: y + 'px'
});
detailImage.css({
"left": -3.5 * (event.pageX - this.offsetLeft) + 'px',
"top": -3.5 * (event.pageY - this.offsetTop) + 'px'
});
});
}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
< gebunden 🎜 >mouseenter img, Sie haben eine glassBox generiertglassBox 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 1Anstatt Mouseenter Mouseleave zu verwenden, verwenden Sie direkt Mousemove, um zu bestimmen, ob die Mausposition innerhalb des Bereichs von img liegt.
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;
}glassBox.css({
"width": this.width() / 2 + 'px',
"height": this.height() /2 + 'px',
"background-color": 'grey',
"position": "absolute",
"left" : '0px',
"top": '0px',
'opacity': '0.2',
'display': 'none',
'border': '1px solid blue',
'z-index': 2 // 保证glassBox在overlay的下面，在img的上面
});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!
