<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jq放大镜</title>
<style type="text/css">
*{margin:0;padding:0;}
.container{
width:1000px;
margin:50px auto;
}
.min{
width:400px;
height: auto;
float: left;
}
.top{
width:400px;
height: 300px;
position: relative;
}
b{
width:180px;
height:180px;
background: blue;
opacity: 0.5;
position: absolute;
left:0px;
top:0px;
display: none;
}
.bottom{
width:400px;
height:60px;
margin-top:20px;
}
.left{
width:10px;
height:45px;
float: left;
}
.item{
float: left;
}
.item ul{
width:370px;
list-style: none;
margin-left:10px;
}
.item ul li{
margin-left:5px;
float:left;
}
.item ul li img{
width:60px;
height:45px;
border: 1px solid #ccc;
padding:2px;
}
.right{
width:10px;
height:45px;
float: left;
}
.max{
width:400px;
height: 300px;
float: right;
overflow: hidden;
display: none;
position: relative;
}
.max img{
width:800px;
height: 600px;
position: absolute;
left: 0;
top: 0;
}
.item ul li img.bg{
border:2px solid orange;
}
</style>
</head>
<body>
<div class="container">
<div class="min">
<div class="top">
<img src="fangdajingImg/1.jpg" alt="">
<b></b>
</div>
<div class="bottom">
<div class="left"><img src='fangdajingImg/left.gif'></div>
<div class="item">
<ul>
<li><img src='fangdajingImg/1.jpg' class="bg"></li>
<li><img src='fangdajingImg/2.jpg'></li>
<li><img src='fangdajingImg/3.jpg'></li>
<li><img src='fangdajingImg/4.jpg'></li>
<li><img src='fangdajingImg/5.jpg'></li>
</ul>
</div>
<div class="right"><img src='fangdajingImg/right.gif'></div>
</div>
</div>
<div class="max">
<img src="fangdajingImg/1.jpg" alt="">
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script>
$(function(){
$('.item ul li img').click(function(){
$(this).addClass('bg').parent().siblings().find('img').removeClass('bg')
$('.top img').attr('src',$(this).attr('src'))
$('.max img').attr('src',$(this).attr('src'))
})
$('.top').mousemove(function(e){
$('b').show()
$('.max').show()
var x=e.pageX-$(this).offset().left-$('b').width()/2
var y=e.pageY-$(this).offset().top-$('b').height()/2
var width=$(this).width()-$('b').width()
var height=$(this).height()-$('b').height()
if(x<0){
x=0
}else if(x>width){
x=width
}
if(y<0){
y=0
}else if(y>height){
y=height
}
$('b').css({
'left':x,
'top':y
})
$('.max img').css({
'left':-2*x,
'top':-2*y
})
})
})
</script>
</html>
