jquery鼠标点击图片自定义放大移动特效代码

Image with default zoom:

Example code:


					<img id="imageZoom" src="https://picsum.photos/1080/720" alt="A image to apply the ImageZoom plugin">
					<script>
						$(document).ready(function(){
							$('#imageZoom').imageZoom();
						});
					</script>

Image with 200% zoom:


					<img id="imageZoomExtra" src="https://picsum.photos/1440/1080" alt="A image to apply the ImageZoom plugin">
					<script>
						$(document).ready(function(){
							$('#imageZoomExtra').imageZoom({zoom : 200});
						});
					</script>

Image with 300% zoom:


					<img id="imageZoomExtraPlus" src="https://picsum.photos/1920/1080" alt="A image to apply the ImageZoom plugin">
					<script>
						$(document).ready(function(){
							$('#imageZoomExtraPlus').imageZoom({zoom : 300});
						});
					</script>

Multiple mages with same class:


					<img src="https://picsum.photos/1921/1081" alt="A image to apply the ImageZoom plugin" class="zoom-images">
					<br/>
					<img src="https://picsum.photos/1922/1082" alt="A image to apply the ImageZoom plugin" class="zoom-images">
					<br/>
					<img src="https://picsum.photos/1923/1083" alt="A image to apply the ImageZoom plugin" class="zoom-images">
					<br/>
					<img src="https://picsum.photos/1924/1084" alt="A image to apply the ImageZoom plugin" class="zoom-images">
					<script>
						$(document).ready(function(){
							var zoomImages = $('.zoom-images');
							zoomImages.each(function() {
								$(this).imageZoom();
							});
						});
					</script>