当前位置：网站首页>【网站放大镜效果】两种方式实现

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

2022-07-30 18:41:00 【马小跳的Coding进阶之路】

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

在这里插入图片描述

二、具体操作代码：

有两种方式：

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

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

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

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

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

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

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

完整代码如下：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<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>

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>