jquery镜头变焦完美定位

Question

我正在尝试在没有第三方插件的情况下为我的购物网站发明 jquery 图像缩放效果。除镜头外一切正常。我的镜头移出图像边界并且无法正确缩放。需要帮助来解决这个问题。

$(function(){
	//Load First Default Image in PreviewPane	
		$('.previewPane, #zoomer').css('background-image','url('+$('.imgkey').first().prop('src')+')');
	//Mini image click function to change previewPane image			
		$('.imgkey').on('click',function(){
			$('.previewPane').css('background-image','url('+$(this).prop('src')+')');
		});
	//PreviewPane Mouse Move Function
		$('.previewPane').on('mousemove touchmove',function(ev){
			$('#zoomer').css('display','inline-block');
	//Insert Lens on mouseOver
			$(this).html('<div class="lens"></div>');			
	//Offset is outside of the element
			var $offset = $(this).offset();				
	//Get Image Url for Zoomer
			var img = $(this).css('background-image').replace(/^url\(['"](.+)['"]\)/, '$1');
			//var img = $(this).parent().find('img').prop('src');
  	// adjust the values first
			var relX = ev.pageX + $offset.left - $('.lens').width();
			var relY = ev.pageY + $offset.top - $('.lens').height(); 
//prevent lens move outside of the previewPane
			if(relX > img.width - $('.lens').offsetWidth) {relX = img.width - $('.lens').offsetWidth;}
			if(relX < 0){relX = 0;}
			if(relY > img.height - $('.lens').offsetHeight) {relY = img.height - $('.lens').offsetHeight;}
			if(relY < 0){relY = 0;}

    // tweek the lens here
			$('.lens').css('left', relX + 50);
			$('.lens').css('top', relY + 55);

//Get x & y position of image
			//var a = $(this).get(0).getBoundingClientRect();

	//Set image to zoomer
			$('#zoomer').css('background-image','url('+img+')');
	//Set zoomer background position				
			$('#zoomer').css('background-position',((-relX * 2) + "px " + (-relY * 2) + "px"));
			//console.log(ev.pageX);
		});
	//PreviewPane Mouse Out Function
		$('.previewPane').mouseleave(function(){
			$('.lens').fadeOut();
			$('#zoomer').fadeOut();
		});
	});

.imgkey{width:50px;height:50px;border:1px solid #ddd;cursor:pointer;}
	.imgkey:hover{border:1px solid #666;}
	#zoomer,.previewPane{border:1px solid #ddd;width:250px;height:250px;background-repeat:no-repeat;background-position:center center;}
	.previewPane{display:inline-block;background-size:100% 100%}
	#zoomer{display:none;background-color:#eee;z-index:1000;}
	.lens{border:2px solid #444;width:125px;height:125px;background-color:#fff;cursor:crosshair;position:absolute;opacity:0.5;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<main>
		<div class="previewPane"></div><div id="zoomer"></div>
		<div class="imgline">
			<img class="imgkey" src="https://images-na.ssl-images-amazon.com/images/I/812vZzhnjKL._SX466_.jpg">
			<img class="imgkey" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRRHcol8Yn1frq--dojSoPYyaxIhqu_ERqPKi7f7Qt5D_5AFkb3">
			<img class="imgkey" src="http://nerfgunheadquarters.com/wp-content/uploads/2016/04/NERF-Cam-ECS-12-Blaster.jpg">
			<img class="imgkey" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdWTvJ1bGLUkiPkkCE3APTPlbUnIUv0r9dd_CSOLT8sLZgvtjo4A">
		</div>
	</main>

这里的镜头没有完美定位，图像没有按预期缩放。

Answer 1

一些想法。 使镜头的宽度和高度与缩放后的窗口显示相匹配。接近 125px。

添加不重复的缩放器背景图像。

尝试重构一下

    // adjust the values first
        var relX = ev.pageX + $offset.left - $('.lens').width();
        var relY = ev.pageY + $offset.top - $('.lens').height(); 
    // and tweek the lens here
        $('.lens').css('left', relX + 15);
        $('.lens').css('top', relY + 20);

我希望这能给你一些想法。祝你好运