jquery写的两种放大镜小案例

最新推荐文章于 2024-07-14 18:00:00 发布

web_emmet

最新推荐文章于 2024-07-14 18:00:00 发布

阅读量3.6k

点赞数

分类专栏： JavaScript jquery 文章标签： javascript jquery 放大镜淘宝

本文链接：https://blog.csdn.net/u014753892/article/details/53045015

版权

JavaScript 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

jquery写的两种放大镜效果，没有使用到插件。调理和思路清晰。不是使用面向对象方式写的，初学者较容易看懂。废话不多说，看代码。图片这里就不上传了，大家自己找下。最好是找到比例的，这样效果比较好。

<body>
	<div id="father">
		<div id="container">
			<img src="img/400_1.jpg" style="display: block;">
			<img src="img/400_2.jpg" >
			<div class="shade"></div>
		</div>
		<div class="small first"><img src="img/50_1.jpg"></div>
		<div class="small second"><img src="img/50_2.jpg"></div>
	</div>
	
	<div class="big">
		<img src="img/800_1.jpg" style="display: block;">
		<img src="img/800_2.jpg">
	</div>
</body>

css代码

	*{padding: 0; margin: 0;}
		#father .small{width: 50px; height: 50px; border: 2px solid #ccc; bottom: 0; position: absolute;}
		#father .second{left: 70px;}
		.third{left: 140px;}
		#father{position: relative; top: 100px; left: 50px; height: 460px;}
		#container{position: absolute;  width: 400px; height: 400px;}
		#container img{position: absolute; display: none;}

		.shade{width: 200px; height: 200px; position: absolute; background: #000; opacity: 0.4; top: 0;
			left: 0; display: none;}
		.big{width: 400px; height: 400px; position: absolute; top: 100px; overflow: hidden; left: 500px; display: none;}
		.big img{width: 800px; height: 800px; position: absolute; display: none;}

js代码

<script type="text/javascript" src='js/jquery-1.12.4.min.js'></script>
	<script type="text/javascript">
		$(function () {

			changePic('.first',0);
			changePic('.second',1);

			var shadeWidth = $('.shade').width(),//阴影的宽度
				shadeHeight = $('.shade').height(),//阴影的高度
				middleWidth = $('#container').width(),//容器的宽度
				middleHeight = $('#container').height(),//容器的高度
				bigWidth = $('.big').width(),//放大图片盒子的宽度
				bigHeight = $('.big').height(),//放大图片盒子的高度
				rateX = bigWidth / shadeWidth,//放大区和遮罩层的宽度比例
				rateY = bigHeight / shadeHeight;//放大区和遮罩层的高度比例

			//当鼠标移入与移出时阴影与放大去显现/消失
			$('#container').hover(function() {
				$('.shade').show();
				$('.big').show();
			}, function() {
				$('.shade').hide();
				$('.big').hide();
			}).mousemove(function(e) {//当鼠标移动时，阴影和放大区图片进行移动

				//记录下光标距离页面的距离
				var x = e.pageX,
					y = e.pageY;

				//设置遮罩层的位置
				$('.shade').offset({
					top: y-shadeHeight/2,
					left: x-shadeWidth/2
				});		

				//获取遮罩层相对父元素的位置
				var cur = $('.shade').position(),
					_top = cur.top,
					_left = cur.left,
					hdiffer = middleHeight - shadeHeight,
					wdiffer = middleWidth - shadeWidth;

				if (_top < 0) _top = 0;
				else if (_top > hdiffer) _top = hdiffer;
				if (_left < 0) _left = 0;
				else if (_left > wdiffer) _left =wdiffer;

				//判断完成后设置遮罩层的范围
				$('.shade').css({
					top: _top,
					left: _left
				});

				//设置放大区图片移动
				$('.big img').css({
					top: - rateY*_top,
					left: - rateX*_left
				});

			});;

			//封装的改变图片显示的函数
			function changePic (element,index) {
				$(element).click(function() {
					$('#container img').eq(index).css('display', 'block').siblings().css('display', 'none');
					$('.big img').eq(index).css('display', 'block').siblings().css('display', 'none');
				});
			}
			
		});

以上是常用的，下面这个是在原图基础上放大的

htm

<body>
	<div id="father">
		<div id="container">
			<img src="img/400_1.jpg" style="display: block;">
			<img src="img/400_2.jpg" >
			<img src="img/400_3.jpg" >
			<div class="shade">
				<img src="img/800_1.jpg" style="display: block;">
				<img src="img/800_2.jpg">
				<img src="img/800_3.jpg">
			</div>
		</div>
		<div class="small first"><img src="img/50_1.jpg"></div>
		<div class="small second"><img src="img/50_2.jpg"></div>
		<div class="small third"><img src="img/50_3.jpg"></div>
	</div>
</body>

css代码

*{padding: 0; margin: 0;}
		#father .small{width: 50px; height: 50px; border: 2px solid #ccc; bottom: 0; position: absolute;}
		#father .second{left: 70px;}
		.third{left: 140px;}
		#father{position: relative; top: 100px; left: 50px; height: 460px;}
		#container{position: absolute;  width: 400px; height: 400px;}
		#container img{position: absolute; display: none;}
		.shade{width: 200px; height: 200px; position: absolute; top: 0;left: 0; display: none; border-radius: 50%; overflow: hidden; background: #000;}
		.shade img{display: none; width: 800px; height: 800px; position: absolute;}

js代码

<span style="white-space:pre">	</span><script type="text/javascript" src='js/jquery-1.12.4.min.js'></script>
	<script type="text/javascript">
		$(function () {

			changePic('.first',0);
			changePic('.second',1);
			changePic('.third',2);

			var shadeWidth = $('.shade').width(),//阴影的宽度
				shadeHeight = $('.shade').height(),//阴影的高度
				middleWidth = $('#container').width(),//容器的宽度
				middleHeight = $('#container').height(),//容器的高度
				bigImgWidth = $('.shade img').width(),//放大图片盒子的宽度
				bigImgHeight = $('.shade img').height(),//放大图片盒子的高度
				rateX = bigImgWidth / middleWidth,//放大区和遮罩层的宽度比例2
				rateY = bigImgHeight / middleHeight;//放大区和遮罩层的高度比例2

			//当鼠标移入与移出时阴影与放大去显现/消失
			$('#container').hover(function() {
				$('.shade').show();
				$('.big').show();
			}, function() {
				$('.shade').hide();
				$('.big').hide();
			}).mousemove(function(e) {//当鼠标移动时，阴影和放大区图片进行移动
				

				//记录下光标距离页面的距离
				var x = e.pageX,
					y = e.pageY;

				//设置遮罩层的位置
				$('.shade').offset({
					top: y-shadeHeight/2,
					left: x-shadeWidth/2
				});		

				//获取遮罩层相对父元素的位置
				var cur = $('.shade').position(),
					_top = cur.top,
					_left = cur.left,
					hdiffer = middleHeight - shadeHeight,
					wdiffer = middleWidth - shadeWidth;

				if (_top < 0) _top = 0;
				else if (_top > hdiffer) _top = hdiffer;
				if (_left < 0) _left = 0;
				else if (_left > wdiffer) _left =wdiffer;

				//判断完成后设置遮罩层的范围
				$('.shade').css({
					top: _top,
					left: _left
				});

				
				//设置放大区图片移动
				$('.shade img').css({
					top: - _top*rateY*3/2,
					left: - _left*rateX*3/2
				});

			});;

			//封装的改变图片显示的函数
			function changePic (element,index) {
				$(element).click(function() {
					$('#container img').eq(index).css('display', 'block').siblings().css('display', 'none');
					$('.shade img').eq(index).css('display', 'block').siblings().css('display', 'none');
				});
			}
			
		});
<span style="white-space:pre">	</span></script>