大家好。今天我在做一個圖片放大鏡的jquery插件。類似京東上那種商品圖片的放大鏡。
我發現我在image物件上綁定了mouseenter和mouseleave後，當滑鼠在image上移動是會同時觸發mouseenter和mouseleave，造成了閃爍。但我並不期望mouseenter, mouseleave被反覆調用，甚至是同時發生。應該如何解決呢？嘗試了網路上的幾種方法都不太可行。
多謝各位。
$.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'
});
});
}HTML如下：
<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>閃爍的原因是這樣的：
你把mouseenter mouseleave事件綁定在img上面
#mouseenter img時，你又產生了一個glassBox
glassBox在img的上層，於是擋住了img和滑鼠遊標，於是產生了一個對於img的mouseleave
於是程式碼又把glassBox display=none了，mouse又能重新enter到img了
解決方案1
不是用mouseenter mouseleave，直接在mousemove裡面對滑鼠的位置是否在img的範圍內進行判斷。
解決方案2
建立一個覆蓋層，和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;
}保證img glassBox overlay的z-index順序：
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的上面
});事件都綁定在overlay上面：
$( document ).ready( function(){
$("#overlay").magnify();
} );以上是jQuery：mouseenter事件和mouseleave事件造成閃爍的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！
