仿京東圖片放大鏡
阿新 • • 發佈：2018-11-13
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script src="./jquery.min.js"></script>
<style>
ul{
margin: 0;
padding: 0;
list-style: none;
}
img{
display: block;
}
.clearfix:after{
content: '';
display: block;
height: 0;
clear: both;
}
.small{
width: 480px;
height: 380px;
/* background: red; */
border: 1px solid gray;
position: relative;
}
.small .shade{
width: 200px;
height: 200px;
background: rgba(238, 235, 93, 0.5);
position: absolute;
top: 0;
left: 0;
}
.small .shade.hide{
display: none;
}
.small .shade:hover{
cursor: crosshair;
}
.big{
width: 600px;
height: 600px;
border: 1px solid gray;
overflow: hidden;
left: 2px;
}
.small, .big{
float: left;
position: relative;
}
.big.hide{
display: none;
}
.big-img{
position: absolute;
top: 0;
left: 0;
}
.content{
position: relative;
}
.content .items{
position: absolute;
width: 480px;
}
.content .items li{
float: left;
margin: 18px 0 0 18px;
border: 1px solid gray;
opacity: 0.5;
}
.content .items li.active{
border: 1px solid #42aefe;
opacity: 1;
}
</style>
</head>
<body>
<div class="content">
<div class="clearfix">
<div class="small">
<div class="shade hide"></div>
<img class="small-img" src="./advanced_small1.png" alt="">
</div>
<div class="big hide">
<img src="./advanced_big1.png" alt="" class="big-img">
</div>
</div>
<ul class="items clearfix">
<li class="active"><img src="./advanced1.png" alt=""></li>
<li><img src="./advanced2.png" alt=""></li>
<li><img src="./advanced3.png" alt=""></li>
<li><img src="./advanced4.png" alt=""></li>
<li><img src="./advanced5.png" alt=""></li>
<li><img src="./advanced6.png" alt=""></li>
<li><img src="./advanced7.png" alt=""></li>
<li><img src="./advanced8.png" alt=""></li>
<li><img src="./advanced9.png" alt=""></li>
</ul>
</div>
<script>
var x, y, shadeX, shadeY, bigX, bigY;
$(function(){
$('.items').css('top',$('.small').height()+$('.small').offset().top)
$('.content .items li').each(function(index, elem){
$(elem).click(function(){
$(this).addClass('active').siblings().removeClass('active')
$('.small-img').attr('src','./advanced_small'+Number(index+1)+'.png');
$('.big-img').attr('src','./advanced_big'+Number(index+1)+'.png');
})
})
$('.small').mouseover(function(){
//滑鼠在small中的座標
x = event.clientX - $(this).offset().left;
y = event.clientY - $(this).offset().top;
console.log(event.clientX)
console.log(x);
console.log(y);
$('.shade').removeClass('hide');
$('.big').removeClass('hide');
}).mousemove(function(){
x = event.clientX - $(this).offset().left;
y = event.clientY - $(this).offset().top + $('html').scrollTop();
shadeX = Number(x-$('.shade').width()/2);
shadeY = Number(y-$('.shade').height()/2);
if(x <= 100){
shadeX = Number(100-$('.shade').width()/2);
}
if(y <= 100){
shadeY = Number(100-$('.shade').height()/2);
}
if(x >= 380){
shadeX = Number(380-$('.shade').width()/2);
}
if(y >= 280){
shadeY = Number(280-$('.shade').height()/2);
}
bigX = -Number(shadeX * 2.4);
bigY = -Number(shadeY * 2.3);
console.log(x+":"+y)
$('.shade').css('left', shadeX+"px")
$('.shade').css('top', shadeY+"px")
$('.big-img').css('left',bigX+"px");
$('.big-img').css('top',bigY+"px");
}).mouseout(function(){
$('.shade').addClass('hide');
$('.big').addClass('hide');
})
})
</script>
</body>
</html>