大家好。今天我在做一个图片放大镜的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事件造成闪烁的问题的详细内容。