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

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

你可能感兴趣的:(实现鼠标经过,产品图片的局部放大功能)