<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>17.2jQuery案例二放大镜</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//1.鼠标移入小图片效果
$('#goodsPic .smallPicList li').mouseenter(function(){
var n = $(this).index();//当前对象索引值
$(this).addClass('active').siblings().removeClass('active');
$('#goodsPic .bigPicList li').eq(n).show()
.siblings().hide();
$('#goodsPic .middlePicList li').eq(n).show()
.siblings().hide();
});
//2.鼠标移入遮罩层
$('#maskLayer').mouseenter(function(){
//显示浮动层
$('#floatLayer').show();
//显示大图片列表
$('#goodsPic .bigPicList').show();
});
//3.鼠标移出遮罩层
$('#maskLayer').mouseleave(function(){
//隐藏浮动层
$('#floatLayer').hide();
//隐藏大图片列表
$('#goodsPic .bigPicList').hide();
});
//4.鼠标在遮罩层中移动
$('#maskLayer').mousemove(function(event){
//获取鼠标在遮罩层中的位置,也就是偏移量
var x = event.offsetX;//左偏移量
var y = event.offsetY;//上偏移量
//console.log("左偏移量:"+x+"上偏移量"+y);
//获取浮动层的宽度和高度
var fw = $('#floatLayer').width();//浮动层宽度
var fh = $('#floatLayer').height();//浮动层高度
//console.log("浮动层宽度:"+fw+"浮动层高度:"+fh);
//获取遮罩层的宽度和高度
var mw = $('#maskLayer').width();//遮罩层宽度
var mh = $('#maskLayer').height();//遮罩层高度
//console.log("遮罩层宽度:"+mw+"遮罩层高度:"+mh);
//初始化浮动层位置
var t = 0;
var l = 0;
//设置浮动层位置
//控制上边界
if(y<fh/2){t=0;}
else{ t = y - fh/2;}
//控制左边界
if(x<fw/2){l=0;}
else{ l = x - fw/2;}
//控制右边界
if(x>mw-fw/2){l = mw - fw;}
//控制下边界
if(y>mh-fh/2){t = mh - fh;}
//定位浮动层
$('#floatLayer').offset({top:t,left:l});
//计算相对位置
var prex = l/(mw-fw);
var prey = t/(mh-fh);
//计算大图片容器的宽度与高度
var bpw = $('#goodsPic .bigPicList').width();
var bph = $('#goodsPic .bigPicList').height();
//计算大图片的宽度和高度
var biw = $('#goodsPic .bigPicList li img').width();
var bih = $('#goodsPic .bigPicList li img').height();
//计算大图片的相对位置，也就是偏移量
var bl = -(biw - bpw)*prex;
var bt = -(bih - bph)*prey;
//定位大图片
$('#goodsPic .bigPicList li img').css({left:bl,top:bt});
});
});
</script>
<style>
*{ margin:0; padding:0;}
li{ list-style-type:none;}
#goodsPic{
width:430px;
height:500px;
position:relative;
}
/*大图片列表样式*/
#goodsPic .bigPicList{
width:430px;
height:430px;
overflow:hidden;
position:absolute;
top:0px;
left:436px;
display:none;
}
#goodsPic .bigPicList li{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
display:none;
}
#goodsPic .bigPicList li img{
width:800px;
height:800px;
position:absolute;
top:0px;
left:0px;
}
/*中等图片列表样式*/
#goodsPic .middlePicList{
width:430px;
height:430px;
overflow:hidden;
position:absolute;
top:0px;
left:0px;
}
#goodsPic .middlePicList li{
width:100%;
height:100%;
display:none;
}
#goodsPic .middlePicList li img{
width:100%;
height:100%;
}
/*小图片列表样式*/
#goodsPic .smallPicList{
width:430px;
height:70px;
position:absolute;
left:0px;
bottom:0px;
}
#goodsPic .smallPicList li{
float:left;
width:60px;
height:60px;
border:2px solid #FFF;
margin:3px 11px;
}
#goodsPic .smallPicList li.active{
border:2px solid red;}
#goodsPic .smallPicList li img{
width:100%;
height:100%;
}
/*遮罩层样式*/
#maskLayer{
width:430px;
height:430px;
position:absolute;
top:0;
left:0;
background-color:#F99;
z-index:2;
opacity:0;
}
/*浮动层样式*/
#floatLayer{
width:200px;
height:200px;
position:absolute;
top:0px;
left:0px;
background-color:#FFF;
opacity:0.5;
display:none;
}
</style>
</head>
<body>
<div id="goodsPic">
<!--大图片列表-->
<ul class="bigPicList">
<li style="display:block"><img src="img2/big1.jpg"></li>
<li><img src="img2/big2.jpg"></li>
<li><img src="img2/big3.jpg"></li>
<li><img src="img2/big4.jpg"></li>
<li><img src="img2/big5.jpg"></li>
</ul>
<!--中等图片列表-->
<ul class="middlePicList">
<li style="display:block"><img src="img2/middle1.jpg"></li>
<li><img src="img2/middle2.jpg"></li>
<li><img src="img2/middle3.jpg"></li>
<li><img src="img2/middle4.jpg"></li>
<li><img src="img2/middle5.jpg"></li>
</ul>
<!--小图片列表-->
<ul class="smallPicList">
<li class="active"><img src="img2/small1.jpg"></li>
<li><img src="img2/small2.jpg"></li>
<li><img src="img2/small3.jpg"></li>
<li><img src="img2/small4.jpg"></li>
<li><img src="img2/small5.jpg"></li>
</ul>
<!--遮罩层-->
<div id="maskLayer"></div>
<!--浮动层-->
<div id="floatLayer"></div>
</div>
</body>
</html>
默认效果
鼠标移入小图片
鼠标移入中等图片
