图片放大镜效果
案例分析
//案例分三大塊 //1 鼠標經過圖片盒子 遮罩盒子 和 放大鏡盒子顯示 鼠標離開 它們隱藏 //2 遮罩層跟隨鼠標移動功能 //3 移動黃色遮罩層 大圖片跟隨移動
1）第一部分思路
2）第二部分思路
3）第三部分思路
4）最大移動值的概念
代碼實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手機詳情頁！</title>
<style>
.preview_img {
position: relative;
398px;
height: 398px;
border: 1px solid #ccc;
}
.mask {
display: none;
position: absolute;
top: 0;
left: 0;
300px;
height: 300px;
background: #FEDE4F;
opacity: .5;
border: 1px solid #ccc;
cursor: move;
}
.big {
display: none;
position: absolute;
left: 410px;
top: 0;
500px;
height: 500px;
background-color: pink;
z-index: 999;
border: 1px solid #ccc;
overflow: hidden;
}
.big img {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="preview_img">
<img src="upload/s3.png" alt="">
<div class="mask"></div>
<div class="big">
<img src="upload/big.jpg" alt="" class="bigImg">
</div>
</div>
<script>
var preview_img = document.querySelector('.preview_img');//外面的大盒子
var mask = document.querySelector('.mask');//黃色陰影盒
var big = document.querySelector('.big');//最大的盒子
//1 鼠標移入顯示隱藏的2個盒子
preview_img.addEventListener('mouseover',function () {
mask.style.display = 'block';
big.style.display = 'block';
});
//2 鼠標松開 隱藏2個盒子
preview_img.addEventListener('mouseout',function () {
mask.style.display = 'none';
big.style.display = 'none';
});
//3 鼠標移動的時候 讓黃色盒子跟著鼠標走
preview_img.addEventListener('mousemove',function (e) {
//3.1 先求出鼠標在盒子內的坐標
var x = e.pageX - preview_img.offsetLeft;
var y = e.pageY - preview_img.offsetTop;
//3.2 把鼠標的坐標 給 遮擋盒子的left 和 top值
var maskX = x - mask.offsetWidth / 2; //x坐標
var maskY = y - mask.offsetHeight / 2; //y坐標
var levelMax = preview_img.offsetWidth - mask.offsetWidth;//遮擋層x軸最大移動距離
var verticalMax = preview_img.offsetHeight - mask.offsetHeight;//遮擋層y軸最大移動距離
//3.3 做x和y方向最小最大可移動范圍的判斷
// 如果小于0 就等于0 保證移動不出左邊
// 如果大于最大值 就等于最大值 保證移動不出右邊
maskX <= 0 ? maskX = 0 : maskX;
maskX >= levelMax ? maskX = levelMax : maskX;
maskY <= 0 ? maskY = 0 : maskY;
maskY >= verticalMax ? maskY = verticalMax : maskY;
//3.4 拼接一下 單位px
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
//3.5 做放大鏡效果
var bigImg = document.querySelector('.bigImg');//拿到大圖
var bigImgMax_x = bigImg.offsetWidth - big.offsetWidth;//大圖x軸的最大移動距離
var bigImgMax_y = bigImg.offsetHeight - big.offsetHeight;//大圖y軸的最大移動距離
//計算公式：大圖片的移動距離 = 遮擋層移動距離 * 大圖片最大移動距離 / 遮擋層的最大移動距離
// bigImgX = maskX * bigImgMax_x / levelMax
var bigImgX = maskX * bigImgMax_x / levelMax;//大圖x軸移動距離
var bigImgY = maskY * bigImgMax_x / verticalMax;//大圖y軸移動距離
bigImg.style.left = - bigImgX + 'px';
bigImg.style.top = - bigImgY + 'px';
});
</script>
</body>
</html>
用到的圖片
總結
- 上一篇： 数据结构算法 二进制转十进制_数据结构
- 下一篇： 瓜子宣布升级为第三方平台：已完成从自营平