jQuery中mouseenter和mouseleave造成闪烁的问题
大家好。今天我在做一个图片放大镜的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>
展开
收起
1
条回答
写回答
写回答
-
闪烁的原因是这样的：
你把
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();2019-07-17 19:21:29赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
