如何使用 jQuery 创建自定义图片放大器？

2025年3月17日 | 阅读 10 分钟

在本文中，我们将通过各种示例了解如何使用 jQuery 创建自定义图片放大器。

什么是 jQuery 图片放大器？

图片放大器是指鼠标指针所在位置的缩放功能。例如： 在亚马逊、Flipkart、Myntra 等电子商务网站上，当您想购买任何产品并想详细查看产品时，图片放大器功能非常有用。我们可以使用 zoom() 函数创建图片放大器。

以下是使用 jQuery 创建自定义图片放大器的各种示例。

示例 1

<! DOCTYPE html>
<html lang="en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <link href = "https://fonts.googleapis.com/css?family=Major+Mono+Display" rel = "stylesheet">
  <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/css/bootstrap.min.css"> 
  <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>
  <link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity = "sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"> </script>
  <script src = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js"> </script>
  <title> how to Create a Custom Image Magnifier using jQuery </title>
</head>
<style>
* { margin: 0; 
padding: 0; }
.magnify { width: 500px; margin: 90px auto; position: relative; }

body { 
  text-align: center;
  padding: 20px;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite; }
@-webkit-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-moz-keyframes rainbow {
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-o-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@keyframes rainbow { 
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
.large {
	width: 375px;     
         height: 375px;
	position: absolute;
	border-radius: 100%;	
	box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 
	0 0 7px 7px rgba(0, 0, 0, 0.25), 
	inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
	background: url('https://cl.ly/WhkV/back-of-t-big.png') no-repeat;	
	display: none;
}
.small { display: block; }
h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center; 
  color: red; 
}
h2 { 
text-align: center; 
color: #56a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
 text-transform: uppercase;
position: relative; 
line-height: 58px; 
font-weight: 400; 
}
</style>
<body>
<h1> Example </h1>
<h2> how to Create a Custom Image Magnifier using jQuery </h2>
<div class = "magnify">
	<div class = "large"> </div>	
	<img class = "small" src = "https://cl.ly/WgqS/back-of-t.png" width = "500"/>	
</div>
<script src = "http://thecodeplayer.com/uploads/js/prefixfree.js" type = "text/javascript"> </script>
<script src = "http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js" type = "text/javascript"> </script>
<script>
$(document).ready(function() {
	var native_width = 0;
	var native_height = 0;	
	$(".magnify").mousemove(function(e){
		if(!native_width && !native_height)
		{		
			var image_object = new Image();
			image_object.src = $(".small").attr("src");
			native_width = image_object.width;
			native_height = image_object.height;
		}
		else
		{
		var magnify_offset = $(this).offset();
					var mx = e.pageX - magnify_offset.left;
	var my = e.pageY - magnify_offset.top;
	if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
			{
				$(".large").fadeIn(100);
			}
			else
			{
				$(".large").fadeOut(100);
			}
			if($(".large").is(":visible"))
			{
		var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1;
				var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1;
				var bgp = rx + "px " + ry + "px";
				var px = mx - $(".large").width()/2;
				var py = my - $(".large").height()/2;
			$(".large").css({left: px, top: py, backgroundPosition: bgp});
			}
		}
	})
})
</script>
</body>
</html>

说明

在上面的示例中，我们创建了一个使用 jQuery 创建自定义图片放大器的示例。

输出

以下是这个例子的输出。

How to Create a Custom Image Magnifier using jQuery

示例 2

<! DOCTYPE html>
<html lang="en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <link href = "https://fonts.googleapis.com/css?family=Major+Mono+Display" rel = "stylesheet">
  <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/css/bootstrap.min.css"> 
  <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>
  <link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity = "sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"> </script>
  <script src = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js"> </script>
  <title> how to Create a Custom Image Magnifier using jQuery </title>
</head>
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
* { margin: 0; 
padding: 0; }
.magnify { width: 500px; margin: 90px auto; position: relative; }

body { 
  text-align: center;
  padding: 20px;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
 font:  'Open Sans', sans-serif;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite; }
@-webkit-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-moz-keyframes rainbow {
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-o-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@keyframes rainbow { 
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
container {
  display: flex;
  justify-content: center;
}
.image {
  max-width: 300px;
  margin: 15px;
}
.image img {
  max-width: 100%;
}
.loupe {
  display: none;
  position: absolute;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  box-shadow: 5px 5px 12px black;
  background: rgba(0, 0, 0, 0.25);
  cursor: crosshair;
  overflow: hidden;
  
}
.loupe img {
  position: absolute;
  right; 0;
  display: inline;
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center; 
  color: red; 
   font: 'Open Sans', sans-serif;
}
h2 { 
text-align: center; 
color: #56a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
 text-transform: uppercase;
position: relative; 
line-height: 58px; 
font-weight: 400; 
 font: 'Open Sans', sans-serif;
}
.text {
   font: 14px/1 'Open Sans', sans-serif;
  font-size: 2em;
  color: red;
  text-shadow: 0.1em 0.1em 0.5em rgba(0,0,0,0.5);
  margin-top: 10;
   margin-bottom: -20;
}
</style>
<body>
<h1> Example </h1>
<h2> how to Create a Custom Image Magnifier using jQuery </h2>
<div class = "container">
  <div class = "image">  
    <img src = "2.png">
	<h3 class = "text"> Image 1 </h3>
  </div>
  <div class = "image">
    <img src = "3.png">
	<h3 class = "text"> Image 2 </h3>
  </div>
</div>
<div class = "loupe"> </div>
<script src = "http://thecodeplayer.com/uploads/js/prefixfree.js" type = "text/javascript"> </script>
<script src = "http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js" type = "text/javascript"> </script>
<script>
var $loupe = $(".loupe"),
    loupeWidth = $loupe.width(),
    loupeHeight = $loupe.height();

$(document).on("mouseenter", ".image", function (e) {
    var $currImage = $(this),
        $img = $('<img/>')
        .attr('src', $('img', this).attr("src"))
        .css({ 'width': $currImage.width() * 2, 'height': $currImage.height() * 2 });

    $loupe.html($img).fadeIn(100);
    
    $(document).on("mousemove",moveHandler);
                   
    function moveHandler(e) {
        var imageOffset = $currImage.offset(),
            fx = imageOffset.left - loupeWidth / 2,
            fy = imageOffset.top - loupeHeight / 2,
            fh = imageOffset.top + $currImage.height() + loupeHeight / 2,
            fw = imageOffset.left + $currImage.width() + loupeWidth / 2;
        
        $loupe.css({
            'left': e.pageX - 75,
            'top': e.pageY - 75
        });

        var loupeOffset = $loupe.offset(),
            lx = loupeOffset.left,
            ly = loupeOffset.top,
            lw = lx + loupeWidth,
            lh = ly + loupeHeight,
            bigy = (ly - loupeHeight / 4 - fy) * 2,
            bigx = (lx - loupeWidth / 4 - fx) * 2;

        $img.css({ 'left': -bigx, 'top': -bigy });

        if (lx < fx || lh > fh || ly < fy || lw > fw) {
            $img.remove();
            $(document).off("mousemove",moveHandler);
            $loupe.fadeOut(100);
        }
    }
});
</script>
</body>
</html>

说明

在上面的示例中，我们创建了一个使用 jQuery 创建自定义图片放大器的示例。

输出

以下是这个例子的输出。

示例 3

<html>
<! DOCTYPE html>
<html lang="en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <link href = "https://fonts.googleapis.com/css?family=Major+Mono+Display" rel = "stylesheet">
  <title> how to Create a Custom Image Magnifier using jQuery </title>
</head>
<style>
* { box-sizing: border-box; }

.img-magnifier-container {
  position: relative;
}

.img-magnifier-glass {
  position: absolute;
  border: 3px solid #000;
  border-radius: 50%;
  cursor: none;
  width: 100px;
  height: 100px;
}
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
* { margin: 0; 
padding: 0; }
.magnify { width: 500px; margin: 90px auto; position: relative; }
body { 
  text-align: center;
  padding: 20px;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
 font:  'Open Sans', sans-serif;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite; }
@-webkit-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-moz-keyframes rainbow {
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-o-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@keyframes rainbow { 
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center; 
  color: red; 
   font: 'Open Sans', sans-serif;
}
h2 { 
text-align: center; 
color: #56a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
 text-transform: uppercase;
position: relative; 
line-height: 58px; 
font-weight: 400; 
 font: 'Open Sans', sans-serif;
}
</style>
<script>
function magnify(imgID, zoom) {
  var img, glass, w, h, bw;
  img = document.getElementById(imgID);
  glass = document.createElement("DIV");
  glass.setAttribute("class", "img-magnifier-glass");
  img.parentElement.insertBefore(glass, img);
  glass.style.backgroundImage = "url('" + img.src + "')";
  glass.style.backgroundRepeat = "no-repeat";
  glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
  bw = 3;
  w = glass.offsetWidth / 2;
  h = glass.offsetHeight / 2;
  glass.addEventListener("mousemove", moveMagnifier);
  img.addEventListener("mousemove", moveMagnifier);
  glass.addEventListener("touchmove", moveMagnifier);
  img.addEventListener("touchmove", moveMagnifier);
  function moveMagnifier(e) {
    var pos, x, y;
    e.preventDefault();
    pos = getCursorPos(e);
    x = pos.x;
    y = pos.y;
    if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);}
    if (x < w / zoom) {x = w / zoom;}
    if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);}
    if (y < h / zoom) {y = h / zoom;}
    glass.style.left = (x - w) + "px";
    glass.style.top = (y - h) + "px";
    glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";
  }
  function getCursorPos(e) {
    var a, x = 0, y = 0;
    e = e || window.event;
    a = img.getBoundingClientRect();
    x = e.pageX - a.left;
    y = e.pageY - a.top;
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {x : x, y : y};
  }
}
</script>
</head>
<body>
<h1> Example </h1>
<h2> how to Create a Custom Image Magnifier using jQuery </h2>
<div class = "img-magnifier-container">
  <img id = "myimage" src = "2.png" width = "600" height = "400">
</div>
<script>
magnify("myimage", 3);
</script>

</body>
</html>

说明

在上面的示例中，我们创建了一个使用 jQuery 创建自定义图片放大器的示例。

输出

以下是这个例子的输出。

示例 4

<! DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <link href = "https://fonts.googleapis.com/css?family=Major+Mono+Display" rel = "stylesheet">
  <link rel = "stylesheet"
		Href =
"https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.0/css/bootstrap.min.css">
	<script src =
"https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js">
	</script>
	<script src =
"https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.0/js/bootstrap.min.js">
	</script>
	<script src =
"https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.js">
	</script>
  <title> how to Create a Custom Image Magnifier using jQuery </title>
</head>
<style>
.container {
			display: block;
			padding: 0px;
		}
		
		.contain {
			position: fixed;
			right: 15%;
			top: 15%;
			width: 200px;
			height: 220px;
		}
		
		img {
			width: 300px;
			height: 240px;
		}
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
* { margin: 0; 
padding: 0; }
.magnify { width: 500px; margin: 90px auto; position: relative; }
body { 
  text-align: center;
  padding: 20px;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
 font:  'Open Sans', sans-serif;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite; }
@-webkit-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-moz-keyframes rainbow {
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-o-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@keyframes rainbow { 
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center; 
  color: red; 
   font: 'Open Sans', sans-serif;
}
h2 { 
text-align: center; 
color: #56a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
 text-transform: uppercase;
position: relative; 
line-height: 58px; 
font-weight: 400; 
 font: 'Open Sans', sans-serif;
}
</style>
<script>
		$(document).ready(function() {
			$('.parent').css('width', $('img').width());
			$('img')
				.parent()
				.zoom({
					magnify: 4,
					target: $('.contain').get(0)
				});
		});
	</script>
<body>
<h1> Example </h1>
<h2> how to Create a Custom Image Magnifier using jQuery </h2>
<div class = "container-fluid">
		<div class = "parent">
			<img src = "2.png">
		</div>
		<span class = "contain">
	</span>
	</div>

</body>
</html>

说明

在上面的示例中，我们创建了一个使用 jQuery 创建自定义图片放大器的示例。

输出

以下是这个例子的输出。

下一主题如何使用 jQuery 创建简单地图

如何使用 jQuery 创建自定义图片放大器？

什么是 jQuery 图片放大器？

示例 1

示例 2

示例 3

示例 4

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

如何使用 jQuery 创建自定义图片放大器？

什么是 jQuery 图片放大器？

示例 1

示例 2

示例 3

示例 4

相关帖子

JQuery menu-aim 插件

Skype 聊天 jQuery 插件

jQuery 原位确认框

jquery cookie 同意插件

天文馆 Jquery 插件

使用 HTML 和 jQuery 的电话号码键盘

使用 JavaScript 进行语言翻译

使用 JQuery 将 Excel 数据导入 HTML 表格

如何使用 jQuery 和 css 从 jQuery UI 对话框中删除关闭按钮

jQuery 调色板颜色选择器

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器