jQuery关于移入移出鼠标，遮罩层闪烁的问题_鼠标移入移出事件闪烁问题

最近写的那个放大镜效果在ie浏览器兼容模式下出现了闪烁效果，由此去查询了jQuery的***mouseout***与***mouseover***事件的问题。

  mouseout: 只要鼠标指针移出事件所绑定的元素或其子元素，都会触发该事件
         mouseleave: 只有鼠标指针移出事件所绑定的元素时，才会触发该事件
1
2

如果没有子元素，那么该元素绑定两种事件效果没有区别，只会触发一次事件；如果绑定了mouseout事件的元素存在子元素，那么，每次移入该元素时都会触发一次事件（包括从外部移入和从子元素移入），移入子元素时也会触发一次事件。mouse over和mouseenter差别同理，所以就出现了如上的动态效果闪烁的问题，因为在不停的触发事件。因此我更正了mouseout事件为mouseleave ，mouseover改为了mouseenter。

然后我还发现了选区不准确的问题和跑图的问题（原则上要固定图片)，因此一次性改正~
现在效果图如下：

逻辑部分做了更正，将放大区的偏移量二次赋值取消，改为了分情况赋值，更改了选区和放大展示区的大小，使之符合预期效果。
新更新代码如下：
html页面没更改

<div class="occCaseMain  focus1">
				<div class="occCaseMainL">
					<div class="occCaseMainImg bigimageBox">
				<img src="./images/Jewelryinspectionsystem.png" class="bigimage">
					<div class="magnifier"></div>   //鼠标选取区域
						</div>
					</div>
						<div class="right">//放大后展示区域
				<img src="" mirror>
						</div>
						........................
							</div>
1
2
3
4
5
6
7
8
9
10
11
12

css更正：

.right {
	position: absolute;
	overflow: hidden;
	width: 350px;
	height: 220px;
	left: 650px;
	top: 0;
	display: none;
	z-index: 999;
}
.right img{
	position: absolute;
    width:954px;
    height:594px;
}

.magnifier {
	width: 240px;
	height: 150px;
	background: rgba(254, 238, 167, 0.4);
	/* 半透明效果 */
	position: absolute;
	z-index: 2;
	display: none;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

JavaScript：
变更的部分是：边界非边界放大区的分类赋值，事件类型更正：从mouseout事件为mouseleave ，mouseover改为了mouseenter。

function bigger() {
				this.init = function (obj) {
					var _this = this;
					this.dom = $(obj.el);
					for (var i in obj) {
						this[i] = obj[i]
					}
					_this.event();
				},
				this.event=function(){
					var _this = this;
					this.dom.find(".bigimageBox").mouseenter(function (even) {
						_this.dom.find('.magnifier').css('display', 'block'); //遮罩显示
						_this.dom.find('.right').css('display', 'block');
					})
				//当鼠标在原图中移动的时候

				this.dom.find(".bigimageBox").mousemove(function (e) {
					//放大镜框跟着鼠标移动而移动
					//获取鼠标位置
					var pageX = e.pageX;
					var pageY = e.pageY;
					//获取原图在文档中的偏移位置
					var offsetX = _this.dom.find('.bigimage').offset().left;
					var offsetY = _this.dom.find('.bigimage').offset().top;
					//计算鼠标在原图里的相对位置
					var relativeX = pageX - offsetX;
					var relativeY = pageY - offsetY;
					//鼠标在非边界的时候处于放大镜框的中心，根据鼠标位置计算放大镜的位置
					var magOffsetX = _this.dom.find('.magnifier').width() / 2;
					var magOffsetY = _this.dom.find('.magnifier').height() / 2;

					var address = _this.dom.find('.bigimage').attr("src");
					_this.dom.find("[mirror]").attr("src", address);

					_this.dom.find('.magnifier').css({
						left: relativeX - magOffsetX + 'px',
						top: relativeY - magOffsetY + 'px'
					});

					//然后获取放大镜框的最新位置，处理边界情况会使用到
					var magX = _this.dom.find('.magnifier').position().left;
					var magY = _this.dom.find('.magnifier').position().top;

					//处理边界问题！！！！！！！！！！！！！！！！

					//首先确定边界！
					var maxMagX = _this.dom.find('.bigimage').width() - _this.dom.find('.magnifier').width()
					var maxMagY = _this.dom.find('.bigimage').height() - _this.dom.find('.magnifier').height()
					// 左边界
					var originX = magX * 1.5;
					var originY = magY * 1.5;

						//实现图片随着放大镜框的移动而移动
					//按照比例缩放移动原图窗口中的图片
					if (magX <= 0) {
						_this.dom.find('.magnifier').css('left', '0px');
					}else if (magX >= maxMagX) {
					// 右边界
						_this.dom.find('.magnifier').css('left', maxMagX + 'px');

					}else{
					_this.dom.find('[mirror]').css({left: -originX + 'px'})
					}
					// 上边界
					if (magY <= 0) {
						_this.dom.find('.magnifier').css('top', '0px');
                      // 下边界
					}else if (magY >= maxMagY) {
						_this.dom.find('.magnifier').css('top', maxMagY + 'px');
					}else{
						_this.dom.find('[mirror]').css({
						top: -originY + 'px'
					});
					}
				})

				//鼠标离开
				this.dom.find('.bigimageBox').mouseleave(function () {
					_this.dom.find(".magnifier").css("display", "none");
					_this.dom.find('.right').css("display", "none");
				   })
				}
				
			}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85