<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
html {
padding: 100px;
}
/*中等图片*/
#middle {
display: inline-block;
min-width: 400px;
height: 400px;
border: 1px solid #000000;
text-align: center;
position: relative;
}
#middle img {
height: 100%;
}
/*放大窗口(大图片放大镜)*/
#show {
display: none;
position: absolute;
overflow: hidden;
border: 1px solid #000000;
}
/*中等图片放大镜*/
#magnifier {
display: none;
background: #0000FF;
filter: alpha(opacity=50);
opacity: 0.5;
position: absolute;
cursor: move;
}
</style>
<script src="js/jquery-1.12.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//核心：就是2张图片（中等图片和大图片），2个放大镜（中等图片放大镜和大图片显示窗口）
//【由中等图片放大镜的left值和top值得到大图片放大镜的left值和top值】
//left值和top值
// 1、取得【中等图片放大镜】的position().left和position().top
// 2、计算大图片的宽度（高度）与中等图片的宽度（高度）的比例
// 3、【大图片放大镜】的left：【中等图片放大镜】的position().left * 宽度比
// 【大图片放大镜】的top：【中等图片放大镜】的position().top * 高度比
//【由大图片放大镜的宽度和高度得到中等图片放大镜的宽度和高度】
//放大镜的宽度和高度
// 1、先定大图片放大镜（也就是大图片的显示窗口）的高度=宽度=中等图片的高度
// 2、计算大图片的宽度（高度）与大图片放大镜的宽度（高度）的比例
// 3、中等图片放大镜的宽度：中等图片的宽度/宽度比
// 中等图片放大镜的高度：中等图片的高度/高度比
$(function() {
//中等图片放大镜
var $magnifier = $("#magnifier");
//中等图片展示窗口
var $middle = $("#middle");
//中等图片展示窗口的高度
var middleHeight=$middle.innerHeight();
//获取中等图片展示窗口相对于html的位置
var xMiddle = $middle.offset().left;
var yMiddle = $middle.offset().top;
//中等图片
var $middleImg = $middle.find("img");
//大张图片放大镜(显示窗口)
var $show = $("#show");
//大张图片放大镜(显示窗口)的宽度和高度
var showSize=middleHeight;
//大张图片
var $showImg = $show.find("img");
//图片路径数组
var arrMiddleImgSrc=["images/5.jpg","images/xx.jpg"];
var arrShowImgSrc=["images/5-300.jpg","images/xx300.jpg"];
//小图片
var $smallImg=$("#small img");
//给每个小图片绑定函数，点击小图片切换到相应的中等图片和大图片
$smallImg.each(function (idx,small) {
$(this).on("click",function () {
$middleImg.attr("src",arrMiddleImgSrc[idx]);
$showImg.attr("src",arrShowImgSrc[idx]);
})
})
$middle.on("mouseover", function() {
//显示中等图片放大镜
$magnifier.show();
//显示大张图片放大镜(show窗口)
$show.show();
//设置大图片放大镜在页面位置和宽高
$show.css({
position: "absolute",
left: xMiddle + $middle.outerWidth() + 20,
top: yMiddle,
width: showSize,
height: showSize
})
//大张图片的宽度和高度
$showImg = $show.find("img");
var showImgWidth = $showImg.outerWidth();
var showImgHeight = $showImg.outerHeight();
//计算大图片宽度与大图片放大镜宽度的比例
var xx = showImgWidth / showSize;
//计算大图片高度与大图片放大镜高度的比例
var yy = showImgHeight / showSize;
//中等图片的宽度和高度
var middleImgWidth = $middleImg.outerWidth();
var middleImgHeight = $middleImg.outerHeight();
//设置中等图片放大镜的宽高
$magnifier.css({
width: middleImgWidth / xx,
height: middleImgHeight / yy
})
//获得放大镜的宽度/2
var iWidth = $magnifier.outerWidth() / 2;
//获得放大镜的高度/2
var iHeight = $magnifier.outerHeight() / 2;
//top值的底部边界
var top_bottom = $middle.innerHeight() - $magnifier.outerWidth();
//left值的右侧边界
var left_right = $middle.innerWidth() - $magnifier.outerWidth();
//移动放大镜
$(document).on("mousemove", function(e) {
//获取放大镜相对于中等图片显示窗口的位置
var xMagnifier = $magnifier.position().left;
var yMagnifier = $magnifier.position().top;
//计算left值和top值的放大比例
var xScale = showImgWidth / middleImgWidth;
var yScale = showImgHeight / middleImgHeight;
//计算大图片的left值和top值
var x = xMagnifier * xScale;
var y = yMagnifier * yScale;
//设置大图片的left值和top值
$showImg.css({
position: "absolute",
left: -x,
top: -y
});
//计算鼠标在中等图片中的位置
var iLeft = e.clientX - xMiddle - iWidth;
// iTop要考虑滚动条的情况
var iTop = e.clientY - yMiddle - iHeight + $(window).scrollTop();
//根据鼠标在中等图片中的位置，设置中等图片放大镜的位置
//第1种情况：中等图片放大镜在四个顶角上
//左上角
if(iLeft <= 0 && iTop <= 0) {
$magnifier.css({
left: 0,
top: 0
})
}
//左下角
else if(iLeft <= 0 && iTop >= top_bottom) {
$magnifier.css({
left: 0,
top: top_bottom
})
}
//右上角
else if(iLeft >= left_right && iTop <= 0) {
$magnifier.css({
left: left_right,
top: 0
})
}
//右下角
else if(iLeft >= left_right && iTop >= top_bottom) {
$magnifier.css({
left: left_right,
top: top_bottom
})
}
//第2种情况：中等图片放大镜不在4个顶角上，但超出边界
//左边界
else if(iLeft <= 0) {
$magnifier.css({
left: 0,
top: e.clientY - yMiddle - iHeight + $(window).scrollTop()
})
}
//右边界
else if(iLeft >= left_right) {
$magnifier.css({
left: left_right,
top: e.clientY - yMiddle - iHeight + $(window).scrollTop()
})
}
//上边界
else if(iTop <= 0) {
$magnifier.css({
left: e.clientX - xMiddle - iWidth,
top: 0
})
}
//下边界
else if(iTop >= top_bottom) {
$magnifier.css({
left: e.clientX - xMiddle - iWidth,
top: top_bottom
})
}
//第3种情况：中等图片放大镜不在顶角上，也没有超出边界
else {
$magnifier.css({
left: e.clientX - xMiddle - iWidth,
top: e.clientY - yMiddle - iHeight + $(window).scrollTop()
})
}
})
//鼠标移出中等图片区域
//1、取消mouseover事件，
//2、将放大镜和show窗口隐藏
$middle.on("mouseout", function() {
$(document).off("mousemove");
//隐藏放大窗口
$magnifier.hide();
//隐藏show窗口
$show.hide();
})
})
})
</script>
</head>
<body>
<div id="middle">
<img src="images/5.jpg" />
<div id="magnifier"></div>
</div>
<div id="small">
<img src="images/5-10.jpg" />
<img src="images/xx10.jpg" />
</div>
<div id="show">
<img src="images/5-300.jpg" />
</div>
</body>
扫一扫
1200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
