jquery---仿淘宝商品图片局部放大

最新推荐文章于 2021-08-04 17:50:44 发布

置顶商嘉航

最新推荐文章于 2021-08-04 17:50:44 发布

阅读量954

点赞数 1

分类专栏：前端开发文章标签： jquery 前端开发图片局部放大

本文链接：https://blog.csdn.net/qq_39176249/article/details/83751534

版权

前端开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本篇博文用于简单记录图片放大功能实现

功能实现还存在一些小漏洞在文章结尾提出，希望各位指正

1、图片放大初考虑将图片转换为字体图片形式，然后进行放大处理，但最终本人技术不过关无法实现，后用width: 200%;进行一般的图片放大，所以当图片越大就存在一些失真；

2、图片放大后的显示为本次实现的关键，通过获取鼠标指针的位置从而获取指针在图片的那一个位置，再以当前位置进行图片放大，放大后将图片进行偏移，偏移量以鼠标指针在原图的位置上获取的left和top值乘以放大倍数就可以显示局部放大的功能了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.10.2.js" ></script>
		<style>
			*{margin: 0;padding: 0;}
			.div1{
				width: 450px;
				height: 300px;
				overflow: hidden;
				display: inline-block;
			}
			.div1>img{width: 100%;}
			.div2{
				width: 450px;
				height: 300px;
				border: 1px solid #A9A9A9;
				overflow: hidden;
				display: inline-block;
				position: relative;
			}
			.div2>img{
				position: absolute;
				width: 200%;
				height: 200%;
			}
			.list1{
				width: 70px;
				height: 50px;
				float: left;
				margin-left: 10px;
			}
			.list1>img{width: 100%;}
			#zhezhao{
				width: 100px;
				height: 100px;
				background: #BC8F8F;
				opacity: 0.7;
				display: none;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<img src="../img/wall1.jpg" alt="" class="img1" />
			<div id="zhezhao"></div>
		</div>
		<div class="div2"></div>
		<div class="list">
			<div class="list1">
				<img src="../img/wall2.jpg" alt="" class="listimg1" />
			</div>	
			<div class="list1">
				<img src="../img/wall3.jpg" alt="" class="listimg2" />
			</div>	
			<div class="list1">
				<img src="../img/wall4.jpg" alt="" class="listimg3" />
			</div>	
			<div class="list1">
				<img src="../img/wall6.jpg" alt="" class="listimg4" />
			</div>	
			<div class="list1">
				<img src="../img/wall5.jpg" alt="" class="listimg5" />
			</div>
		</div>
		
		<script>
			$(function(){
				$('.list1').mouseover(function(){
					$('.div1').children()[0].src = $(this).children()[0].src;
				});
				$('.div1').mousemove(function(e){					
					$('#zhezhao').css({
						left: e.clientX-50+'px',
						top: e.clientY-50+'px',
						display: 'block'
					});
					var $img = $('.div1').children().eq(0);
					$('.div2').empty();
					$('.div2').append($img.clone());
					$('.img1').css({
							left: -(e.clientX-50)*2+'px',
							top: -(e.clientY-50)*2+'px'
						});
					if(50>e.clientX||e.clientX>450||50>e.clientY||e.clientY>300) {
						$('#zhezhao').css({
							display: 'none'
						});
					}else{ //(400<e.clientX&&e.clientX<450||250<e.clientY&&e.clientY<300) 
						$('#zhezhao').css({
							left: e.clientX-50+'px',
							top: e.clientY-50+'px',
							display: 'block'
						});
					}
				});
			});
		</script>
	</body>
</html>

本功能在具体操作上还存在一些问题，当鼠标快速移开原图区域时，无法有效的监听到鼠标移出区域的事件，在考虑使用移出事件时，鼠标悬浮于原图上的遮罩层影响力鼠标在原图上的移出事件，无法很好的解决，希望各位帮忙移出事件。

商嘉航

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery---仿淘宝商品图片局部放大

本篇博文用于简单记录图片放大功能实现功能实现还存在一些小漏洞在文章结尾提出，希望各位指正1、图片放大初考虑将图片转换为字体图片形式，然后进行放大处理，但最终本人技术不过关无法实现，后用width: 200%;进行一般的图片放大，所以当图片越大就存在一些失真；2、图片放大后的显示为本次实现的关键，通过获取鼠标指针的位置从而获取指针在图片的那一个位置，再以当前位置进行图片放大，放大后将图片...
复制链接

扫一扫

专栏目录