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

た入场券 2022-05-23 01:43 252阅读 0赞

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:

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";
    		},