【网站放大镜效果】两种方式实现

一、要实现的效果如下图所示：

在这里插入图片描述

二、具体操作代码：

有两种方式：

2.1——jQuery图像缩放插件zoom.js

使用方法：
1.将 zoom.js 和 zoom.css 文件链接到网站。

<linkhref="css/zoom.css"rel="stylesheet">
<scriptsrc="js/zoom.js"></script>
1
2

2.zoom.js依赖于transition.js文件，所以一定要调用。

<script src="js/transition.js"></script>
1

3.添加一个数据操作="zoom"属性到你想要缩放的图像。如下：

<img src="img/blog_post_featured.png" data-action="zoom">
1

完整代码如下：

DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Documenttitle>
		<style type="text/css">
			.jqzoom {
				border: 1px solid;
				float: left;
			}

			* {
				margin: 0;
				padding: 0;
			}
		style>
		<link rel="stylesheet" type="text/css" href="css/jqzoom.css">
		<script type="text/javascript" src="js/jquery-1.12.4.js">script>
		<script type="text/javascript" src="js/jquery.jqzoom.js">script>
		<script type="text/javascript">
			$(document).ready(function() {
				//放大镜效果 
				$(".jqzoom").jqueryzoom({
					xzoom: 300, //width
					yzoom: 300, //height
					offset: 0
				});
			})
		script>
	head>
	<body>
		<div class="jqzoom">
			<img src="images/yellow_one_small.jpg" jqimg="images/yellow_one_big.jpg" alt="">
		div>
	body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

2.2——jQuery代码实现：

实现思路：
1.左盒子宽度为400px，左边图片尺寸为400px400px
2.右盒子宽度为400px，右边图片尺寸为左图的2.5倍，1000px1000px
3.鼠标悬停后的小框框尺寸：左图÷2.5 = 160px*160px

完整代码如下：

DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>jq代码实现放大镜效果现title>
		<style>
			body,
			ul,
			li {
				padding: 0;
				margin: 0;
				list-style: none;
			}

			.leftbox,
			.rightbox {
				width: 400px;
				height: 400px;
				border: 1px solid red;
				position: absolute;
			}

			.rightbox {
				left: 410px;
				top: 0;
				overflow: hidden;
				display: none;
			}

			.marks {
				/*小图的宽高比例
                窗口的宽度 / 大图的宽度 * 窗口的宽度
            */
				width: 160px;
				height: 160px;
				background: rgba(254, 238, 167, .4);
				position: absolute;
				left: 0;
				top: 0;
				display: none;
			}
		style>
	<body>
		
		<div class="leftbox">
			
			<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp3.ssl.cdn.btime.com%2Ft01cd85a3c6cce1bece.jpg%3Fsize%3D400x400&refer=http%3A%2F%2Fp3.ssl.cdn.btime.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661654929&t=5b7dd79acc7f463411798d9c258fcbb6"
				alt="" width="400">

			
			<div class="marks">div>
		div>

		
		<div class="rightbox">
			<img width="1000"
				src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp3.ssl.cdn.btime.com%2Ft01cd85a3c6cce1bece.jpg%3Fsize%3D400x400&refer=http%3A%2F%2Fp3.ssl.cdn.btime.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661654929&t=5b7dd79acc7f463411798d9c258fcbb6"
				alt="" style="position: absolute;">
		div>

		<script src="html/js/jquey1.12.4.js">script>
		<script>
			// 绑定鼠标移入原图窗口事件
			$('.leftbox').mouseover(function(e) {
				$('.rightbox').css('display', 'block');
				$('.marks').css('display', 'block');

			})
			//绑定鼠标在原图窗口移动的事件
			$('.leftbox').mousemove(function(e) {

				// 获取鼠标当前的位置
				var x = e.clientX;
				var y = e.clientY;
				// 获取原图窗口距离文档的偏移位置
				var sX = $('.leftbox').offset().left;
				var sY = $('.leftbox').offset().top;

				// 计算鼠标的相对位置（相对于原图窗口的偏移距离）
				var mx = x - sX;
				var my = y - sY;

				// 获取小框框的宽高
				var mw = $('.marks').width() / 2;
				var mh = $('.marks').height() / 2;

				// 鼠标移动后小框框的移动距离
				$('.marks').css({
					left: mx - mw + 'px',
					top: my - mh + 'px'
				});

				// 获取小框框的偏移位置
				var lw = $('.marks').position().left;
				var lh = $('.marks').position().top;


				// 判断边界（小框框只能在原图窗口范围内移动）
				var maxW = $('.leftbox').width() - $('.marks').width()
				var maxH = $('.leftbox').height() - $('.marks').height()
				// 左边界
				if (lw <= 0) {
					$('.marks').css('left', '0px');
				}
				// 右边界
				if (lw >= maxW) {
					$('.marks').css('left', maxW + 'px');
				}
				// 上边界
				if (lh <= 0) {
					$('.marks').css('top', '0px');
				}
				// 下边界
				if (lh >= maxH) {
					$('.marks').css('top', maxH + 'px');
				}

				// 获取小框框的偏移位置
				var lw = $('.marks').position().left;
				var lh = $('.marks').position().top;
				// 计算鼠标在小图里的位置  *2.5计算大图移动的比例
				var newX = lw * 2.5;
				var newY = lh * 2.5;



				$('.rightbox img').css({
					left: -newX + 'px',
					top: -newY + 'px'
				});
			})
			//绑定鼠标离开原图窗口事件
			$('.leftbox').mouseout(function() {
				$('.rightbox').css('display', 'none');
				$('.marks').css('display', 'none');
			})
		script>
	body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

以上两种方法亲测有效。

ending~

相关阅读:
【reverse】虚假控制流入门：Ubuntu20.04安装ollvm4.0踩坑记+用IDApython去除BCF
__slots__限制类动态增加属性【Python面向对象进阶二】
【redis持久化模式】两种持久化方式、概念、原理、如何使用、优劣势_Redis05
LeetCode 双周赛 103（2023/04/29）区间求和的树状数组经典应用
 2000-2021年各省GDP包括名义GDP、实际GDP、GDP平减指数（以2000年为基期）
【动手学深度学习-Pytorch版】注意力汇聚：Nadaraya-Watson 核回归
 国家省、市、县、镇/街道地址
 掌动智能：功能测试及拨测主要功能
 AbstractBeanDefinition解读
 【LeetCode 130. 被围绕的区域】
原文地址：https://blog.csdn.net/weixin_48596030/article/details/126052542