实现鼠标经过,产品图片的局部放大功能

vue中实例：操作dom实现

参考：https://blog.csdn.net/alightman/article/details/78074687

注意点：

1、小图、放大图、高亮区域之间的定位以及结构。

2、鼠标事件绑定在小图和高亮的父元素上。

3、使用mouseenter和mouseleave事件，不使用mouseover和mouseout事件；

区别：当绑定事件的元素里面有子元素的时候，鼠标经过绑定mouseover的当前元素以及它里面的子元素的时候，都会触发，而经过绑定mouseenter的元素时，只会在鼠标刚进入被绑定的元素时触发，当进入其子元素的时候，是不会再触发的了。（触发多次，触发一次的区别）。

4、使用mousemove移动事件 ，事件元素获取位置信息（event.xxx）；参考（https://blog.csdn.net/lzding/article/details/45437707?ticket=ST-335959-Ae5cseJGZEaNAOaq5CC7-passport.csdn.net）;

获取的元素获取位置信息（元素对象.offsetWidth；元素对象.offsetLeft等等）

5、图片等比例缩放（高亮区域宽高/小图区域高宽  = 大图区域宽高/原图宽高）

html:

扫描二维码关注公众号，回复： 5496437 查看本文章

                                <div class="summary" ref="box">
					<div class="gallery">
						<div class="main-img">
							<div id="box"> 
								<div @mouseenter="mouseEnter" @mouseleave="mouseLeave" @mousemove="mouseMove">
									<!-- <img :src="mainImg" alt="主图">	 -->
									<img id="small" src="../assets/images/intent/11.jpg" alt="主图" ref="smallBox">		
									<b id="shadow" ref="shadowBox"></b>																	
								</div>
								<div id="showDetails" ref="showDetailsBox">
									<img src="../assets/images/intent/11.jpg" alt="放大图">
								</div>							
							</div>
						</div>
					</div>
				</div>

css: 

                    .main-img {
				width:500px;		
				height: 500px;	
				border: 1px solid #E5E5E5;
				position: relative;
				#box {
					position: relative; //父级开始定位
					#small{
						width: 500px;		
						height: 500px;
					}
					#shadow{
						display: none;					
						position: absolute;
						left: 0;
						top: 0;
						background-color: #000;
						opacity: 0.3;
						width: 250px;  //高亮区域宽高与小图宽高、放大图区域宽高成比例
						height: 250px;
					}
					#showDetails {
						width: 500px;
						height: 500px;
						display: none;					
						position: absolute;
						top: 0px;
						left: 510px;
						overflow: hidden;
						border: #ededed 1px solid;
						background-color: #FFFFFF;
						img{
							position: absolute; //放大图定位移动
						}
					}
				}
				
			}

js：

                mouseEnter () {
			this.$refs.shadowBox.style.display = "block";
			this.$refs.showDetailsBox.style.display = "block";		
		},
		mouseLeave () {
			this.$refs.shadowBox.style.display = "none";
			this.$refs.showDetailsBox.style.display = "none";	
		},
		mouseMove (ev) {		
			const box = this.$refs.box;	
			const smallBox = this.$refs.smallBox;
			const mask = this.$refs.shadowBox;
			const bigImg = this.$refs.showDetailsBox.firstChild;

			let x = ev.pageX - box.offsetLeft;//被绑定元素到父元素的差值
			let y = ev.pageY - box.offsetTop;	
			x = x - mask.offsetWidth/2;
			y = y - mask.offsetHeight/2;

			if (x < 0) {
				x = 0
			}
			if (x > smallBox.offsetWidth - mask.offsetWidth) {
				x = smallBox.offsetWidth - mask.offsetWidth;
			}
			
			if (y < 0) {
				y = 0
			}
			if (y > smallBox.offsetHeight - mask.offsetHeight) {
				y = smallBox.offsetHeight - mask.offsetHeight
			}

			mask.style.left = x + "px";//小图片移动多少
			mask.style.top = y + "px";

			bigImg.style.left = -bigImg.offsetWidth/smallBox.offsetWidth * x + "px"; //图片成比例缩放原理
			bigImg.style.top = -bigImg.offsetHeight/smallBox.offsetHeight * y + "px";
		},