js鼠标放图片上==放大镜显示效果demo效果示例（整理）

知秋~

已于 2022-06-14 11:17:08 修改

阅读量1.7k

点赞数

文章标签：鼠标放上放大镜小图

于 2018-11-06 17:25:33 首次发布

本文链接：https://blog.csdn.net/qq_38881495/article/details/83791010

版权

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>jQuery-图片的放大镜显示效果</title>
		<style type="text/css">
			img {
				max-width: none;
			}

			.thumbnail-list {
				display: inline-block;
				width: 1.2em;
				height: 1.1em;
				text-align: center;
				font-size: 128px;
			}

			.thumbnail-list img.thumbnail {
				padding: 3px;
				border: 1px solid #cccccc;
				background: white;
				vertical-align: middle;
				position: relative;
			}

			.thumbnail-list:hover,
			.thumbnail-list:hover img.thumbnail {
				border-color: #ff3300;
			}

			.magnify {
				width: 200px;
				height: 200px;
				padding: 3px;
				background: white;
				border: 1px solid #cccccc;
				text-align: center;
				position: absolute;
				z-index: 1000;
				left: 0;
				top: 0;
				overflow: hidden;
			}

			.thumbnail {
				width: 1em;
				height: 1em;
			}
		</style>
	</head>
	<body>
		<a href="http://zhilisms.oos-website-cn.oos-cn.ctyunapi.cn/20220427/933ad955c6c847e7b13ec5651b0feb81.png"
			class="thumbnail-list">
			<img class="thumbnail"
				src="http://zhilisms.oos-website-cn.oos-cn.ctyunapi.cn/20220427/933ad955c6c847e7b13ec5651b0feb81.png" />
		</a>
		<a href="http://zhilisms.oos-website-cn.oos-cn.ctyunapi.cn/20220427/933ad955c6c847e7b13ec5651b0feb81.png"
			class="thumbnail-list">
			<img class="thumbnail"
				src="http://zhilisms.oos-website-cn.oos-cn.ctyunapi.cn/20220427/933ad955c6c847e7b13ec5651b0feb81.png" />
		</a>
		<a href="http://zhilisms.oos-website-cn.oos-cn.ctyunapi.cn/20220427/933ad955c6c847e7b13ec5651b0feb81.png"
			class="thumbnail-list">
			<img class="thumbnail"
				src="http://zhilisms.oos-website-cn.oos-cn.ctyunapi.cn/20220427/933ad955c6c847e7b13ec5651b0feb81.png" />
		</a>
		<a href="http://zhilisms.oos-website-cn.oos-cn.ctyunapi.cn/20220427/933ad955c6c847e7b13ec5651b0feb81.png"
			class="thumbnail-list">
			<img class="thumbnail"
				src="http://zhilisms.oos-website-cn.oos-cn.ctyunapi.cn/20220427/933ad955c6c847e7b13ec5651b0feb81.png" />
		</a>
	</body>
	<!-- <script type="text/javascript" src="https://cs.m.xczhihui.com/xcview/html/demo/js/jquery.js"></script> -->
	<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
	<script type="text/javascript">
		// jQuery.noConflict();
		jQuery(document).ready(function() {
			$("img.thumbnail").jqueryzoom();
		});
	</script>
	<script>
		(function($) {
			$.fn.jqueryzoom = function(options) {
				var settings = {
					xzoom: 200,
					yzoom: 200,
					offset: 10,
					position: "right"
				};
				if (options) {
					$.extend(settings, options);
				}
				$(this).hover(function() {
					var imageLeft = $(this).get(0).offsetLeft;
					var imageRight = $(this).get(0).offsetRight;
					var imageTop = $(this).get(0).offsetTop;
					var imageWidth = $(this).get(0).offsetWidth;
					var imageHeight = $(this).get(0).offsetHeight;
					var bigimage = $(this).parent().attr("href");
					if ($("span.magnify").get().length == 0) {
						$(this).after("<span class='magnify'><img class='bigimg' src='" + bigimage +
							"'/></span>");
					}
					if (settings.position == "right") {
						leftpos = imageLeft + imageWidth + settings.offset;
					} else {
						leftpos = imageLeft - settings.xzoom - settings.offset;
					}
					$("span.magnify").css({
						top: imageTop,
						left: leftpos
					});
					$("span.magnify").width(settings.xzoom);
					$("span.magnify").height(settings.yzoom);
					$("span.magnify").show();
					$(document.body).mousemove(function(e) {
						var bigwidth = $(".bigimg").get(0).offsetWidth;
						var bigheight = $(".bigimg").get(0).offsetHeight;
						var scaley = 'x';
						var scalex = 'y';
						if (isNaN(scalex) | isNaN(scaley)) {
							var scalex = Math.round(bigwidth / imageWidth);
							var scaley = Math.round(bigheight / imageHeight);
						}
						mouse = new MouseEvent(e);
						scrolly = mouse.y - imageTop - ($("span.magnify").height() * 1 / scaley) / 2;
						$("span.magnify").get(0).scrollTop = scrolly * scaley;
						scrollx = mouse.x - imageLeft - ($("span.magnify").width() * 1 / scalex) / 2;
						$("span.magnify").get(0).scrollLeft = (scrollx) * scalex;
					});
				}, function() {
					$("span.magnify").hide();
					$(document.body).unbind("mousemove");
					$(".lenszoom").remove();
					$("span.magnify").remove();
				});
			}
		})(jQuery);

		function MouseEvent(e) {
			this.x = e.pageX
			this.y = e.pageY
		}
	</script>
</html>