欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JQuery(2)：JQuery实现某宝放大镜效果

程序员文章站 2024-02-26 17:11:16
...

1.前言

​ 一般在购物网站用电脑浏览商品详情的时候，鼠标放上去右侧会弹出一个图片的放大镜效果。本为用jQuery实现模仿某宝的放大镜效果。

2.思路

​ （1）结构图如图所示，放大的效果确实就是左侧的图片是小尺寸的，右边的图片时大尺寸的，在本文中的照片比例是1:2，通过左侧图上的滑块来设置右侧背景图片显示的位置，就实现了图片放大的效果。点击左侧图下方的图片导航，就会更换图片，而更换图片的过程，就是把左侧和右侧的图片都跟更换了，这样就能实现鼠标移入时右侧的图片展示的和左侧图片是一样的图片。

JQuery(2)：JQuery实现某宝放大镜效果
（2）滑块与鼠标的位置会有偏差，通过减去相应的偏差，鼠标才会展示在滑块的中间位置。上图中滑块的起点位置是以左侧边框为参照物的，而鼠标的位置是以浏览器最左侧为参照物的。所以如果简单的把鼠标的位置直接赋值给滑块移动的位置，二者就会产生偏差，导致鼠标和滑块不在同一个点上，解决办法就是用鼠标的位置坐标减去左侧边框距离浏览器边框的值。

3代码实现

（1）css代码

* {
	margin: 0px;
	padding: 0;
}

img {
	border: none;
	vertical-align: bottom;
}

li {
	list-style: none;
}

.banner {
	width: 400px;
	height: 500px;
	border: 1px solid #666;
	margin: 30px 0 0 30px;
	position: relative;
}

.up {
	height: 400px;
	position: relative;
}

.up img {
	width: 100%;
	height: 100%;
}

.up .slide {
	width: 200px;
	height: 200px;
	/*background: rgba(0, 0, 0, 0.5);*/
	background: url(../img/slide.png);
	/*元素运动，肯定是要操作元素的定位属性的  left top right bottom*/
	position: absolute;
	left: 0px;
	top: 0px;
	display: none;
}

.list {
	height: 100px;
}

.list li {
	float: left;
	width: 90px;
	height: 90px;
	margin: 2px;
	border: 3px solid white;
	transition: 0.3s;
}

/* .list li:hover {
	border-color: orangered;
} */

.list li img {
	width: 100%;
	height: 100%;
}

.big {
	width: 400px;
	height: 400px;
	position: absolute;
	/*background: skyblue;*/
	left: 450px;
	top: 0px;
	overflow: hidden;
	border: 1px solid #666;
	display: none;
}

.bigImg {
	width: 800px;
	height: 800px;
	/*运动*/
	position: absolute;
	left: 0px;
	top: 0px;
}

（2）js代码

//鼠标移动事件,拿到事件对象中的鼠标位置
$('.up').mousemove(function(event) {
	// 获取广告图的左侧和顶部位置，广告图是从body开始计数的，而滑块是根据广告图进行计数的，所以要减去中间的差值
	var x = event.clientX - $('.up').offset().left - $('.slide').outerWidth() / 2;
	var y = event.clientY - $('.up').offset().top - $('.slide').outerHeight() / 2;
	// 获取广告图的右侧和底部位置，因为滑块从左上角有点计数，所以要减去滑块本身的大小
	var slide_bottom = $('.up').outerHeight() - $('.slide').outerHeight();
	var slide_right = $('.up').outerWidth() - $('.slide').outerWidth();

	//控制滑块的上下左右范围，不能超出这个范围
	if (x <= 0) {
		x = 0
	};
	if (y <= 0) {
		y = 0
	};
	if (y >= slide_bottom) {
		y = slide_bottom;
	};
	if (x >= slide_right) {
		x = slide_right
	};

	//直接把鼠标点位置设置给滑块,设置滑块定位值
	$('.slide').css({
		left: x,
		top: y
	});
	//同时还要设置图片移动，左侧图片的大小为400*400，而原图大小是800*800，所以比例关系是1:2，故乘以2即可
	// 不同的图片尺寸，需要设置不同的大小
	$('.bigImg').css({
		left: -x * 2,
		top: -y * 2,
	});
});

//鼠标移入到up显示滑块和大图盒子, 默认隐藏
$('.up').mouseover(function(event) {
	$('.slide').css('display', 'block');
	$('.big').css('display', 'block');
});
//鼠标移出到up隐藏滑块和大图盒子
$('.up').mouseout(function(event) {
	$('.slide').css('display', 'none');
	$('.big').css('display', 'none');
});

//批量绑定事件，点击当前li，拿到当前li下面的img的src值，马上设置上面图的img为拿到的值及大图的img值
$('.list li img').each(function(m) {
	$(this).mouseenter(function() {
		// 先给所以边框设置白色，一个障眼法，看不出来
		$('.list li').css("border"," 3px solid white");
		// 鼠标移到那个图片列表，就给它设置橘红色的边框
		$('.list li').eq(m).css("border"," 3px solid orangered");
		// 左侧图片更改图片
		$('.up img').prop('src','img/'+(m+1)+'.jpg');
		// 右侧放大镜图更改图片
		$('.big img').prop('src','img/'+(m+1)+'.jpg');
	});
});

（3）HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>仿淘宝放大镜</title>
	</head>
	<body>
		<div class="banner">
			<!--上-->
			<div class="up">
				<img src="img/1.jpg" />
				<div class="slide"></div>
			</div>
			<!--下 列表-->
			<ul class="list">
				<li><img src="img/1.jpg" /></li>
				<li><img src="img/2.jpg" /></li>
				<li><img src="img/3.jpg" /></li>
				<li><img src="img/4.jpg" /></li>
			</ul>
			<!--右边-->
			<div class="big">
				<img class="bigImg" src="img/1.jpg" />
			</div>
		</div>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</html>

4.效果展示

JQuery(2)：JQuery实现某宝放大镜效果

相关标签： JQuery jquery html css js

上一篇： 学习高翔一起做rgbd-slam中关于g20部分的学习一

下一篇： 如何用jQuery做一个简单的轮播（一）

推荐阅读