使⽤jQuery实现图⽚放⼤镜效果使⽤jQuery实现图⽚放⼤镜效果
  在淘宝上购物时，经常可以看到图⽚放⼤镜效果，如下图所⽰：
  下⾯给出上述效果的jQuery实现代码，⼀切尽在代码注释中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图⽚放⼤镜</title>
<style>
body,
ul,
li {
padding: 0;
margin: 0;
list-style: none;
jquery在线图片
}
/* 缩略图和原图宽⾼⼀样 */
.thumbnail,
.origin {
width: 400px;
height: 400px;
border: 1px solid red;
position: absolute;
}
.origin {
left: 410px; /* 原图在缩略图的右边 */
top: 0;
overflow: hidden; /* 隐藏溢出内容 */
display: none;
}
/* 放⼤镜框 */
/* 这⾥按2.5倍放⼤，400px/160px=2.5 */
.magnifier {
.magnifier {
width: 160px;
height: 160px;
background: rgba(254, 238, 167, .4); /* 半透明效果 */
position: absolute;
left: 0;
top: 0;
display: none;
}
</style>
</head>
<body>
<!-- “缩略图”窗⼝ -->
<div class="thumbnail">
<img src="images/beauty.jpg" width="400">
<!-- “放⼤镜”框 -->
<div class="magnifier"></div>
</div>
<!-- “原图”窗⼝ -->
<div class="origin">
<img src="images/beauty.jpg" width="1000">
</div>
<script src="code.jquery/jquery-1.12.4.min.js"></script>
<script>
/*
放⼤镜实现原理：
1. “缩略图”窗⼝与“原图”窗⼝中放置的是同⼀个图⽚，但“缩略图”窗⼝中的图⽚被缩⼩为400px，
⽽“原图”窗⼝中的图⽚保持原始⼤⼩，溢出部分设为隐藏
2. 先确定缩放⽐例，我们假定原图⼤⼩为1000px，缩略图⼤⼩为400px，缩放⽐例为2.5
3. ⾸先实现“放⼤镜”框跟随⿏标移动的功能（我们让⿏标处于“放⼤镜”框的中⼼）
4. 其次实现“原图”窗⼝中的图⽚随“放⼤镜”框的移动⽽相应移动
5. ⿏标向右移动，“原图”窗⼝中的图⽚向左移动，它们的⽅向是相反的！这是实现原理中的关键环节
6. “放⼤镜”框的⼤⼩不是随意设定的，它与放⼤倍数有关，如果要放⼤2.5倍，
则“原图”窗⼝的⼤⼩也应该是“放⼤镜”框的⼤⼩的2.5倍
*/
// 当⿏标进⼊“缩略图”窗⼝时，显⽰“原图”窗⼝和“放⼤镜”框
$('.thumbnail').mouseover(function (e) {
$('.origin').css('display', 'block');
$('.magnifier').css('display', 'block');
})
// 当⿏标在“缩略图”窗⼝中移动时
$('.thumbnail').mousemove(function (e) {
// ⼀、⾸先实现“放⼤镜”框跟随⿏标移动的功能（我们让⿏标处于“放⼤镜”框的中⼼）
// 获取⿏标当前位置
var pageX = e.pageX;
var pageY = e.pageY;
// 获取“缩略图”窗⼝在整个⽂档中的偏移位置
var offsetX = $('.thumbnail').offset().left;
var offsetY = $('.thumbnail').offset().top;
// 计算⿏标在缩略图中的相对位置
var relativeX = pageX - offsetX;
var relativeY = pageY - offsetY;
// 考虑到⿏标处于“放⼤镜”框的中⼼，我们要根据⿏标位置计算“放⼤镜”框的位置
var magOffsetX = $('.magnifier').width() / 2;
var magOffsetY = $('.magnifier').height() / 2;
$('.magnifier').css({ left: relativeX - magOffsetX + 'px',
top: relativeY - magOffsetY + 'px' });
// 获取“放⼤镜”框的新位置，后⾯会⽤到
var magX = $('.magnifier').position().left;
var magY = $('.magnifier').position().top;
// ⼆、处理越界情况
// 确定边界
var maxMagX = $('.thumbnail').width() - $('.magnifier').width()
var maxMagY = $('.thumbnail').height() - $('.magnifier').height()
// 左边界
if (magX <= 0) { $('.magnifier').css('left', '0px'); }
// 右边界
if (magX >= maxMagX) { $('.magnifier').css('left', maxMagX + 'px'); }            // 上边界
if (magY <= 0) { $('.magnifier').css('top', '0px'); }
// 下边界
if (magY >= maxMagY) { $('.magnifier').css('top', maxMagY + 'px'); }            // 三、其次实现“原图”窗⼝中的图⽚随“放⼤镜”框的移动⽽相应移动
// 按照之前确定的缩放⽐例移动“原图”窗⼝中的图⽚
// 注意：图⽚的移动⽅向与⿏标的移动⽅向是相反的！
var originX = magX * 2.5;
var originY = magY * 2.5;
$('.origin img').css({ left: -originX + 'px', top: -originY + 'px' });
})
// 当⿏标离开“缩略图”窗⼝时，隐藏“原图”窗⼝和“放⼤镜”框
$('.thumbnail').mouseout(function () {
$('.origin').css('display', 'none');
$('.magnifier').css('display', 'none');
})
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。