Jquery отзывчивый продукт без плагинов - PullRequest
Новая
       27

Jquery отзывчивый продукт без плагинов

0 голосов
/ 18 марта 2019

Я пытаюсь создать эффект масштабирования продукта jquery, и все работает хорошо, но проблема в том, что я не могу установить центр указателя мыши в объективе. Я просто следую инструкциям из "https://codepen.io/anon/pen/NGJJeB" и это javascript. Вот почему я не могу найти то, что я делаю неправильно !!

Также я хочу знать, что в моем коде есть ошибки, потому что в консоли я не нашел никаких ошибок! 

if($('.previews').length > 0){
//Load First Default Image in PreviewPane	
	$('.previews').css('background-image','url('+$('.imgkey').first().attr('src')+')');
//Mini image click function to change previewPane image			
	$('.imgkey').on('mouseover mouseenter',function(){
		$('.previews').css('background-image','url('+$(this).attr('src')+')');
	});

		//PreviewPane Mouse Move Function
		$('.previews').on('mousemove touchstart touchmove',function(ev){
			$('#zoomer').show().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 imgSrc = $(this).css('background-image').replace(/^url\(['"](.+)['"]\)/, '$1');
//Adjust the mouse			
			var posX = ev.offsetX ? (ev.offsetX) : ev.pageX - $offset.left;
  			var posY = ev.offsetY ? (ev.offsetY) : ev.pageY - $offset.top;
		//prevent lens move outside of the previewPane
			if(posX > $(this).width() - $('.lens').width()){posX = $(this).width() - ($('.lens').width() + 1) + 'px';}
			if(posX < 0){posX = 0;}
			if(posY > $(this).height() - $('.lens').height()){posY = $(this).height() - ($('.lens').height() + 1) + 'px';}
			if(posY < 0){posY = 0;}
    //Tweak the lens here
			$('.lens').css('left', posX);
			$('.lens').css('top', posY);
	//Set zoomer background position				
			$('#zoomer').css('background-position',((-posX * 3) + "px " + (-posY * 3) + "px"));			
	//Set image to zoomer
			$('#zoomer').css('background-image','url('+imgSrc+')');			
		});
	//PreviewPane Mouse Out Function
		$('.previews').on('mouseleave',function(){ $('#zoomer').hide(); });		
}
 


	

<!-- begin snippet: js hide: false console: true babel: false -->
	.box{width:420px;height:300px;border:1px solid #000;margin:30px;}
	.imgkey{display:inline-block;width:50px;height:50px;margin:2px;border:1px solid #444;cursor:pointer}
	.previews{width:200px;height:200px;left:0;border:1px solid #000;;cursor:cell;}
	.previews{display:inline-block;background-repeat:no-repeat;background-position:center center;background-size:100% 100%}
	#zoomer{height:200px;width:200px;border:1px solid #000;background-color:#ccc;display:none;overflow:hidden;left:200px;top:-260px;position:relative;z-index:999;}
	.lens{width:calc(40%);height:calc(40%);border:1px dashed #999;background-color:#f00;cursor:cell;position:relative;opacity:0.3}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
	<div class="previews"></div>
	<div class="imgline">
		<img class="imgkey" src="http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg" />
		<img class="imgkey" src="https://cdn.shopify.com/s/files/1/0622/2101/products/product-image-496137782_800x.jpg?v=1519622126" />
		<img class="imgkey" src="https://images-na.ssl-images-amazon.com/images/I/61IPCXn13AL._SX385_.jpg" />
		<img class="imgkey" src="https://http2.mlstatic.com/celular-smartphone-caterpillar-s60-negro-32-gb-D_NQ_NP_940281-MCO26572973595_122017-F.jpg" />
	</div>	
	<div id="zoomer"></div>		
</div>
...