大江東去，浪淘盡，千古風流人物。故壘西邊，人道是，三國周郎赤壁。亂石穿空，驚濤拍岸，卷起千堆雪。江山如畫，一時多少豪傑。遙想公瑾當年，小喬初嫁了，雄姿英發。羽扇綸巾，談笑間，檣櫓灰飛煙滅。故國神游，多情應笑我，早生華發。人生如夢，一尊還酹江月。--來自奔跑的panda部落，panda每天與您一起進步
效果圖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿京東放大鏡效果</title>
<style>
.wrap{
width: 400px;
height: 400px;
margin: 150px auto;
border: 1px solid #999999;
/* background: url('images/pic.jpg') no-repeat center center;
background-size: 100%; */
position: relative;
/* overflow: hidden; */
}
.move{
display: none;
width: 150px;
height: 150px;
background: yellow;
opacity: .3;
position: absolute;
left: 0;
top: 0;
cursor: move;
}
.big{
display: none;
width: 500px;
height: 500px;
border: 1px solid #999999;
position: absolute;
left: 410px;
top: 0;
z-index: 9999;
overflow: hidden;
/* background: url('images/pic.jpg') no-repeat center center;
background-size: 100%; */
}
.bigimg{
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="wrap">
<img src="images/pic.jpg" alt="" style="width: 100%;">
<div class="move"></div>
<div class="big"><img src="images/big.jpg" alt="" class="bigimg"></div>
</div>
<script>
var wrap = document.querySelector('.wrap');
var move = document.querySelector('.move');
var big = document.querySelector('.big');
// 鼠標移入移除顯示圖片和放大鏡
wrap.addEventListener('mouseover',function(){
move.style.display = 'block';
big.style.display = 'block';
});
wrap.addEventListener('mouseout',function(){
move.style.display = 'none';
big.style.display = 'none';
});
// 計算鼠標在盒子內的坐標
wrap.addEventListener('mousemove',function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// 讓鼠標顯示在盒子的正中間
movex = x - move.offsetWidth / 2;
movey = y - move.offsetHeight / 2;
// 解決放大鏡的移動到邊界問題
//如果x軸的坐標小於0 ，就讓他停留在 0 的位置
moveMax = wrap.offsetWidth - move.offsetWidth;
if(movex <= 0){
movex = 0;
}else if(movex >= moveMax){
movex = moveMax;
}
// 如果y軸的坐標小於0 ，就讓他停留在 0 的位置
if(movey <= 0){
movey = 0;
}else if(movey >= moveMax){
movey = moveMax;
}
move.style.left = movex + 'px';
move.style.top = movey + 'px';
// 圖片跟隨移動
//完整的求大圖片的移動距離公式：
//(遮擋層的移動距離 / 遮擋層最大的移動距離) = 大圖片的移動距離 / 大圖片最大的移動距離
// 大圖片的移動距離 = (遮擋層的移動距離 * 大圖片的最大移動距離) / 遮擋層最大移動距離
// 獲取大圖
var bigimg = document.querySelector('.bigimg');
// 大圖的最大移動距離
var bigMax = bigimg.offsetWidth - big.offsetWidth;
// 大圖片的移動距離 x，y
var bigx = movex * bigMax / moveMax;
var bigy = movey * bigMax / moveMax;
bigimg.style.left = -bigx + 'px';
bigimg.style.top = -bigy + 'px';
})
</script>
</body>
</html>