放大镜
放大镜
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>放大镜</title>
<script src=”./jquery-1.8.3.min.js”></script>
<style>
*{margin:0;padding:0;list-style:none;}
.Left{
width: 400px;
height: 400px;
border:1px solid red;
position:relative;
}
.Right{
width: 400px;
height: 400px;
border:1px solid green;
position:absolute;
left:410px;
top:0;
overflow: hidden;
display:none;
}
.Right img{
position:absolute;
}
.small{
background:url(./img/bg.png);
position:absolute;
top:0;
left:0;
display:none;
}
.item{
width:400px;
height:110px;
/*border:1px solid red;*/
margin-top:10px;
}
.item li{
width:100px;
height:100px;
border:1px solid red;
float:left;
margin-left:20px;
}
.item li img{
width:100px;
}
</style>
</head>
<body>
<div class=”Left”>
<img src=”./img/3.jpg” alt=”” width=400>
<div class=”small”></div>
</div>
<div class=”item”>
<ul>
<li>
<img src=”./img/2.jpg” alt=””>
</li>
<li>
<img src=”./img/3.jpg” alt=””>
</li>
</ul>
</div>
<div class=”Right”>
<img src=”./img/3.jpg” alt=””>
</div>
<script>
// 蒙版比例 .right的宽/原图的宽*.left的宽度
// 鼠标移入 让蒙版显示
$(‘.Left’).mouseover(function(){
$(‘.small’).css(‘display’,’block’);
$(‘.Right’).css(‘display’,’block’);
// 计算蒙版的大小
var sW=$(‘.Right’).width()/$(‘.Right img’).width()*$(‘.Left’).width();
var sH=$(‘.Right’).height()/$(‘.Right img’).height()*$(‘.Left’).height();
// 设置蒙版的宽高
$(‘.small’).width(sW);
$(‘.small’).height(sH);
})
// 添加移动事件
$(‘.Left’).mousemove(function(e){
// 获取鼠标的位置
var Sx=e.pageX;
var Sy=e.pageY;
// 让鼠标在small的中心点 鼠标当前的位置-small宽高的一半
var Nx=Sx-$(‘.small’).width()/2;
var Ny=Sy-$(‘.small’).height()/2;
// 计算横向最大的偏移位置 .left宽度-.small的宽度
var maxL=$(‘.Left’).width()-$(‘.small’).width();
// 判断 当small当前的偏移位置>small的最大偏移值的时候=最大偏移值
if(Nx>maxL){
Nx=maxL;
}
// 判断 当samll的当前偏移位置<=0 small的偏移位置=最小偏移位置
if(Nx<=0){
Nx=0;
}
// 计算向下的最大偏移位置 .left高度-small的高度
var maxT=$(‘.Left’).height()-$(‘.small’).height();
// 判断 当samll当前的偏移位置>=最大位置的时候 smalll的偏移位置=最大偏移位置
if(Ny>maxT){
Ny=maxT;
}
// 判断向上最小偏移位置
if(Ny<=0){
Ny=0;
}
// 设置蒙版的位置
$(‘.small’).css({left:Nx+’px’,top:Ny+’px’});
// 让大图跟着小图位置的偏移而偏移 缩放比例2.5倍 1–>1*2.5 100–>100*2.5
var maxImgX=Nx*2.5;
var maxImgY=Ny*2.5;
// 设置大图的偏移
$(‘.Right img’).css({left:-maxImgX+’px’,top:-maxImgY+’px’});
})
// 移出事件
$(‘.Left’).mouseout(function(){
// 让right和蒙版隐藏
$(‘.small,.Right’).css(‘display’,’none’);
})
// 切换图片功能
$(‘.item li img’).click(function(){
// 获取当前点击图片的src的值
var Src=$(this).attr(‘src’);
// 将src的值给 .left .right下的img标签
$(‘.Left img’).attr(‘src’,Src);
$(‘.Right img’).attr(‘src’,Src);
})
</script>
</body>
</html>