jQuery实现放大镜效果

最新推荐文章于 2023-01-14 21:47:59 发布

meiziluleyiguan

最新推荐文章于 2023-01-14 21:47:59 发布

阅读量475

点赞数

分类专栏： jQuery 文章标签： jquery 前端放大镜电商

本文链接：https://blog.csdn.net/meiziluleyiguan/article/details/53142725

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

昨天是一年一度是剁手节，相信大家都开心的完成了自己的购物。今天带来一个电商网站常见的放大镜效果。

原理：

放大镜效果就是当鼠标移入当前图片时，将当前图片放大显示。即显示的大图的宽高是当前图片的两倍大小。在鼠标移动时，大图按照比例进行显示图片，出现放大镜的效果。因此大家在做的时候一张图需要有三种不同的大小，分别对应下方进行切换的小图、当前现实的中等图以及放大后的图片。并且图片命名需根据我代码中的方式进行命名。

效果如下：

我的图片命名格式示例:

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		html,body{
			width: 100%;
			height: 100%;
		}
		body{
			position: relative;
			background:#ccc;
		}
		.middle{
			width: 400px;
			height: 400px;
			position: absolute;
			top: 100px;
			left: 200px;
		}
		.middle img{
			width: 400px;
			height: 400px;
		}
		.pop{
			width: 200px;
			height: 200px;
			position: absolute;
			top: 0;
			left: 0;
			background: #000;
			opacity: 0.4;
			display: none;
		}
		.big{
			width: 400px;
			height: 400px;
			position: absolute;
			left: 650px;
			top: 100px;
			overflow: hidden;
			border:1px solid #000;
			display: none;
		}
		.big img{
			position: absolute;
			width: 800px;
			height: 800px;
		}
		.small{
			position: absolute;
			left: 200px;
			bottom: 80px;
		}
		.bor{
			border: 1px solid #f00;
		}

		#blogaddress{
			position: absolute;
			left:50%;
			bottom:10%;
		}
		#blogaddress a{
			color:#000;
		}
	</style>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			// 点击小图切换大图
			$.each($('.small img'),function(index,element){
				$(this).on('click',function(){
					//动态改变中等图和大图.导入图片的方式根据小图对应的index值，将中等图和大图的src进行替换
					$('.middle img').attr({
						src:"img/430_00"+(index+1)+".jpg",
					});
					$('.big img').attr({
						src:'img/800_00'+(index+1)+'.jpg',
					});
					// 当前点击的添加样式属性
					$(this).addClass('bor').siblings().removeClass('bor');
				});
			});


			// 初始化
			var middleWidth = $('.middle').width(),
				middleHeight = $('.middle').height(),
				popWidth = $('.pop').width(),
				popHeight = $('.pop').height();

			// 鼠标移入图片显示放大镜以及放大后的图片,移出则消失
			$('.middle').hover(function(){
				$('.pop,.big').fadeIn();
			},function(){
				$(".pop,.big").fadeOut();
			}).on('mousemove',function(event){//鼠标移动时

				// 计算出遮罩在整个文档中的绝对定位位置(即光标在遮罩中心的位置)
				var _left = event.pageX - popWidth/2,
					_top = event.pageY - popHeight/2;
				$('.pop').offset({
					"left":_left,
					"top":_top
				});
				// 获取遮罩相对于.middle的定位
				_left = $('.pop').position().left;
				_top = $('.pop').position().top;
				// 判断是否越界
				if(_left<0){
					_left = 0;
				}else if(_left > middleWidth - popWidth){
					_left = middleHeight - popWidth;
				}
				if(_top<0){
					_top = 0;
				}else if(_top > middleHeight -popHeight){
					_top = middleHeight - popWidth;
				}
				// 重新设定定位位置
				$(".pop").css({
					"left":_left,
					"top":_top
				});
				// 放大镜效果:big盒子中的图片安比率移动位置
				$('.big img').css({
					'top': -2*_top,
					"left": -2*_left
				});
			});
		});
	</script>
</head>
<body>
	<div class="middle">
		<img src="img/430_001.jpg" alt="">
		<div class="pop"></div>
	</div>	
	<div class="big">
		<img src="img/800_001.jpg" alt="">
	</div>
	<div class="small">
		<img src="img/60_001.jpg" alt="">
		<img src="img/60_002.jpg" alt="">
		<img src="img/60_003.jpg" alt="">
		<img src="img/60_004.jpg" alt="">
	</div>

	<!--  -->
	<div id="blogaddress">
		更多分享:<a href="http://blog.csdn.net/meiziluleyiguan">
			http://blog.csdn.net/meiziluleyiguan
		</a>
	</div>
</body>
</html>