jQuery放大镜 实现图片的放大

最新推荐文章于 2024-07-14 18:00:00 发布
最新推荐文章于 2024-07-14 18:00:00 发布
阅读量952 收藏 5
点赞数
分类专栏： 学习阶段 文章标签： jQuery 放大镜的实现
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/forevu/article/details/93376882
版权

@TOC使用jQuery实现简单的图片放大操作

一张图片的放大

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>放大镜</title>
</head>
	<style>
		*{margin:0px;padding:0;}
		.small{
			position: relative;
			height: 400px;
			margin-left: 5px;
			
		}
		.small img{
			height: 400px;
		}
		.box{
			position: absolute;
			background: rgba(254, 238, 167, .4);
			left:0;
			top: 0;
			display: none;
			cursor: crosshair;
		}
		.big{
			position:absolute;
			top: 0px;
			left:410px;
			width: 400px;
			height: 400px;
			overflow: hidden;
			display: none;
		}
		.big img{
			position: relative;
		}
	</style>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<body>
	<div class="wrap">
		<!-- 定义一个的盒子放缩略图 -->
		<div class="small">
			<!-- 盒子中的图片 -->
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561221109738&di=1c26477168b0ccfcce36da9cbd5c6829&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F78c92e0e0ad029e5dc3e4f027beacc383eb31e902de17-e0ZWwL_fw658" alt="">
			<!-- 图片中的放那个放大镜 -->
			<div class="box"></div>
		</div>
		<!-- 放大后图片的盒子 -->
		<div class="big">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561221109738&di=1c26477168b0ccfcce36da9cbd5c6829&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F78c92e0e0ad029e5dc3e4f027beacc383eb31e902de17-e0ZWwL_fw658" alt="">
		</div>
	</div>
	<script>
		
		// 当鼠标移入到小图的盒子时，放大镜盒子和大图盒子显示出来
		$('.small').mouseover(function(){
			//放大镜盒子和大图盒子显示
			$('.box').show();
			$('.big').show();
			//获取小图的图片的宽度，高度为400px
			var width = $('.small img').width();
			//获取大图的大小
			var Bwidth = $('.big img').width();
			var Bheight = $('.big img').height();
			//设置放置小图盒子的宽度
			$('.small').css('width',width+'px');
			//设置放大镜滑块的大小
			var Hwidth = ($('.big').width())/Bwidth*($('.small').width());
			var Hheight = ($('.big').height())/Bheight*($('.small').height());
			//设置放大镜盒子的大小
			$('.box').css({'width':Hwidth + 'px','height':Hheight + 'px'});
			
			//
			//设置放大镜盒子移动事件
			$('.small').mousemove(function(e){
				//获取鼠标的位置
				var x = e.clientX;
				var y = e.clientY;
				// console.log(x,y)
				//设置鼠标在放大镜盒子的中心上
				var xx = x - $('.box').width()/2;
				var yy = y -$('.box').height()/2;
				//设置使放大镜盒子不可以出边框
				//最大边界
				var maxX = $('.small').width()-$('.box').width();
				var maxY = $('.small').height()-$('.box').height();
				// console.log(maxX)
				if (xx<0) {
					xx = 0;
				}
				if (xx>maxX) {
					xx = maxX;
				}
				if (yy<0){
					yy = 0;
				}
				if (yy>maxY){
					yy = maxY;
				}
				$('.box').css({'left':xx + 'px','top':yy + 'px'});
				//
				//设置大图跟着放大镜盒子移动
				//查看放大的倍数，及大图的移动距离
				//放大的图片的移动距离为放大镜盒子移动的距离*放大的倍数
				var img_x = xx * ($('.big img').width()/$('.small img').width());
				var img_y = yy * ($('.big img').height()/$('.small img').height());
				//放大的图片的移动
				$('.big img').css({'left':-img_x + 'px','top':-img_y + 'px'});
			})

		})
		
		//鼠标离开放大镜盒子于大图盒子进行隐藏
		$('.small').mouseout(function(){
			$('.box').hide();
			$('.big').hide();
		})
	</script>
</body>
</html>

实现多张图片的放大镜效果：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>放大镜</title>
</head>
	<style>
		*{margin:0px;padding:0;}
		.small{
			position: relative;
			height: 400px;
			margin-left: 5px;
			
		}
		.small img{
			height: 400px;
		}
		.box{
			position: absolute;
			background: rgba(254, 238, 167, .4);
			left:0;
			top: 0;
			display: none;
			cursor: crosshair;
		}
		.big{
			position:absolute;
			top: 0px;
			left:410px;
			width: 400px;
			height: 400px;
			overflow: hidden;
			display: none;
		}
		.big img{
			position: relative;
		}
		ul{
			width: 570px;
			border:1px dashed #ffdf;
		}
		ul li{
			display: inline-block;
		}
		ul li img{
			height: 156px;
		}
	</style>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<body>
	<div class="wrap">
		<!-- 定义一个的盒子放缩略图 -->
		<div class="small">
			<!-- 盒子中的图片 -->
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561221109738&di=1c26477168b0ccfcce36da9cbd5c6829&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F78c92e0e0ad029e5dc3e4f027beacc383eb31e902de17-e0ZWwL_fw658" alt="">
			<!-- 图片中的放那个放大镜 -->
			<div class="box"></div>
		</div>
		<!-- 放大后图片的盒子 -->
		<div class="big">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561221109738&di=1c26477168b0ccfcce36da9cbd5c6829&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F78c92e0e0ad029e5dc3e4f027beacc383eb31e902de17-e0ZWwL_fw658" alt="">
		</div>
	</div>
	<ul class="nav">
		<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561221109738&di=1c26477168b0ccfcce36da9cbd5c6829&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F78c92e0e0ad029e5dc3e4f027beacc383eb31e902de17-e0ZWwL_fw658" alt=""></li>
		<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561230022906&di=8808155e0d8e5d5fe083596b4cce9700&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fbed197486e6f662dbd5bf6c927611c460ad7a2674a5f0-KcQhBq_fw658" alt=""></li>
		<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561230022906&di=c4412bc2c6c74b4fb8caeb0891a7367f&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F34b5d2ff24b87494470669b0a1b7f541d9e785a428cc9-6UnUhC_fw658" alt=""></li>
		<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561230022907&di=291e490c3643c4264eeb3c415eb0ebe2&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Ffc7b7a6caa33bc11eff990b8157dcd88eea8b0c124745-bLXnyq_fw658" alt=""></li>
	</ul>
	<script>
		
		// 当鼠标移入到小图的盒子时，放大镜盒子和大图盒子显示出来
		$('.small').mouseover(function(){
			//放大镜盒子和大图盒子显示
			$('.box').show();
			$('.big').show();
			//获取小图的图片的宽度，高度为400px
			var width = $('.small img').width();
			//获取大图的大小
			var Bwidth = $('.big img').width();
			var Bheight = $('.big img').height();
			//设置放置小图盒子的宽度
			$('.small').css('width',width+'px');
			//设置放大镜滑块的大小
			var Hwidth = ($('.big').width())/Bwidth*($('.small').width());
			var Hheight = ($('.big').height())/Bheight*($('.small').height());
			//设置放大镜盒子的大小
			$('.box').css({'width':Hwidth + 'px','height':Hheight + 'px'});
			
			//
			//设置放大镜盒子移动事件
			$('.small').mousemove(function(e){
				//获取鼠标的位置
				var x = e.clientX;
				var y = e.clientY;
				// console.log(x,y)
				//设置鼠标在放大镜盒子的中心上
				var xx = x - $('.box').width()/2;
				var yy = y -$('.box').height()/2;
				//设置使放大镜盒子不可以出边框
				//最大边界
				var maxX = $('.small').width()-$('.box').width();
				var maxY = $('.small').height()-$('.box').height();
				// console.log(maxX)
				if (xx<0) {
					xx = 0;
				}
				if (xx>maxX) {
					xx = maxX;
				}
				if (yy<0){
					yy = 0;
				}
				if (yy>maxY){
					yy = maxY;
				}
				$('.box').css({'left':xx + 'px','top':yy + 'px'});
				//
				//设置大图跟着放大镜盒子移动
				//查看放大的倍数，及大图的移动距离
				//放大的图片的移动距离为放大镜盒子移动的距离*放大的倍数
				var img_x = xx * ($('.big img').width()/$('.small img').width());
				var img_y = yy * ($('.big img').height()/$('.small img').height());
				//放大的图片的移动
				$('.big img').css({'left':-img_x + 'px','top':-img_y + 'px'});
			})

		})
		//
		//实现图片的切换
		$('.nav li').click(function(){
			var Src = $(this).find('img').attr('src');
			//设置小图和大图框子中的图片
			$('.small img').attr('src',Src);
			$('.big img').attr('src',Src);
		})
		//鼠标离开放大镜盒子于大图盒子进行隐藏
		$('.small').mouseout(function(){
			$('.box').hide();
			$('.big').hide();
		})
	</script>
</body>
</html>
forevu
关注
专栏目录
jquery插件-图片放大器 jqzoom
08-20
jquery插件 模拟的图片放大器效果 jqzoom Magnify
jQuery实现放大镜效果
02-03
相信大家都见过或使用过放大镜效果，甚至实现过该效果，它一般应用于放大查看商品图片，一些电商网站（例如：凡客，京东商城，阿里巴巴等）都有类似的图片查看效果。在接下来的博文中，我们将向大家介绍通过jQuery...
jq图片放大器
qq_43711676的博客
11-26 118
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .div{ width:500px; height: 282px; border: 1px solid gray; } .dv{ width:100px; height: 100px; //di
前端JS特效第36集：jQuery商品图片放大镜查看特效
最新发布
2401_85903333的博客
07-14 190
jQuery商品图片放大镜查看特效
jq做的图片放大器
lyqhn2012的专栏
04-02 1023
效果预览 1.放大之前 2.放大之后 $(function () { var _default = { hoverClass: 'hover-img', zoomWidth: 155, zoomHeight: 155, mainImgWidth: 310, //主图宽度 mainImgHeig...
jQuery图片放大镜插件jqzoom
gundumw100的专栏
04-10 388
JQzoom Demo $(function() { $(".jqzoom").jqzoom(); }); options： 见http://www.mind-projects.it/projects/jqzoom/index.php#examples http://www.mind-projects.it/
jquery 放大镜
BeiBeiTian的博客
11-23 287
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;Document&lt;/title&gt;     &lt;style&gt;         *{             m
简单实用jQuery图片放大镜效果
06-15
本教程将详细介绍如何使用jQuery实现一个简单而实用的图片放大镜效果。 首先，jQuery是一款广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作等任务，使得网页交互变得更加便捷。在我们的案例中，...
jquery插件实现图片放大镜
06-21
jquery插件实现图片放大镜
jQuery电商图片放大镜展示特效
07-28
"jQuery电商图片放大镜展示特效"就是为此目的而设计的一个插件，它能够帮助电商网站实现这种功能，让用户在不离开当前页面的情况下，通过鼠标悬停或点击来查看商品图片的高清晰度细节。 jQuery是一个轻量级、高性能...
jQuery之jqzoom(图片放大镜插件)
03-26
NULL 博文链接：https://liuzidong.iteye.com/blog/1152132
JQuery实现放大镜
weixin_39724159的博客
02-13 542
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Docume...
Jquery实现放大镜效果
qq_35146837的博客
01-14 411
真正的实现放大镜效果，看过来------》
jquery 图片放大器
zhaossdut的专栏
08-11 315
jqzoom插件
【Javascript】【jQuery】jQuery实现图片放大镜功能
天天向上 Up Up Up (*^▽^*)
05-16 419
效果图 html代码 <body> <div id="parent"> <div id="image"></div> <div id="image-big"></div> <div id="mask"></di...
jQuery放大镜
qq_41839784的博客
04-25 242
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin:0px; padding: 0px } ....
jquery放大镜
zhouchuxiong的博客
04-28 305
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>放大镜</title> <style type="text/css"> .bigbox{ width: 710px; margin: 0 auto; } .box1{ ...
自编Jquery实现图片放大镜效果的算法与代码解析
"这篇教程介绍了如何使用jQuery实现一个图片放大镜的效果，包括具体的算法和实现代码，适合对前端开发感兴趣的人学习参考。" 在前端开发中，为了提供更好的用户体验，我们有时需要为网站上的图片添加放大镜效果，让...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值