仿京东放大镜效果
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
仿京东放⼤镜效果案例分析：
1.整个案例可以分为三个功能模块；
2.⿏标经过⼩图⽚盒⼦，黄⾊的遮挡层和⼤图⽚盒⼦显⽰，离开时2个盒⼦隐藏功能；
3.黄⾊的遮挡层跟随⿏标移动功能；
4.移动黄⾊遮挡层，⼤图⽚跟随移动功能。
效果：
代码：
html部分
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>仿京东放⼤镜效果</title>
6<link rel="stylesheet" href="detail.css">
7<script src="detail.js"></script>
8</head>
9<body>
10<div class="preview">
11<img src="../图⽚/iphone.png" alt="" class="preview_img">
12<div class="mask"></div>
13<div class="big">
14<img src="../图⽚/big.jpg" alt="" class="big_img">
15</div>
16</div>
17</body>
18</html>
View Code
css部分
1*{
2 margin: 0;
3 padding: 0;
4 }
5.preview{
6 width: 250px;
7 height: 250px;
8 border: 1px solid #ebebeb;
9 margin: 50px 0 0 50px;
10 text-align: center;
12.preview_img{
13 position: relative;
14 width: 250px;
15 }
16.mask{
17 display: none;
18 position: absolute;
19 width: 150px;
20 height: 150px;
21 background-color: rgba(245, 201, 56, 0.4);
22 top: 0;
23 left: 0;
24 border: 1px solid #ccc;
25 margin: 50px 0 0 50px;
26 cursor: move;
27 }
28.big{
29 display: none;
30 position: absolute;
31 width: 600px;
32 height: 600px;
33 left: 450px;
34 top: 20px;
35 z-index: 999;
36 border: 1px solid #ccc;
37 overflow: hidden;
38 }
39.big_img{
40 position: absolute; /*添加了定位才可以移动*/
41 top: 0;
42 left: 0;
43 width: 1000px;
44 }
js部分
1// 因为是外部的js，所以要等页⾯加载完毕执⾏
2 window.addEventListener('load',function(){
3var preview = document.querySelector('.preview');
4var mask = document.querySelector('.mask');
5var big = document.querySelector('.big');
6//1.当我们⿏标经过preview就显⽰和隐藏mask遮挡层和big⼤盒⼦
7 preview.addEventListener('mouseover',function(){
8 mask.style.display = 'block';
9 big.style.display = 'block';
10 })
11 preview.addEventListener('mouseout',function(){
12 mask.style.display = 'none';
13 big.style.display = 'none';
14 })
15//2.⿏标移动事件
16 preview.addEventListener('mousemove',function(e){
17//(1)先计算出⿏标在盒⼦内的坐标
18var x = e.pageX - preview.offsetLeft;
19var y = e.pageY - preview.offsetTop;
20//(2)减去盒⼦宽度和⾼度的⼀半(x - mask.offsetWidth / 2)
21//(3)限制遮挡层移动范围
22var maskX = x -mask.offsetWidth / 2;
23var maskY = y -mask.offsetHeight / 2;
24//遮挡层的最⼤移动距离
25var maskMax = preview.offsetWidth - mask.offsetWidth; //因为是正⽅形，width和height⽤⼀个就⾏26if(maskX <= 0){
27 maskX = 0;
28 }else if(maskX >= maskMax){
29 maskX = maskMax;
30 }
31if(maskY <= 0){
32 maskY = 0;
33 }else if(maskY >= maskMax){
34 maskY = maskMax;
35 }
36 mask.style.left = maskX + 'px';
37 mask.style.top = maskY + 'px';
38//3.⼤图⽚跟随移动功能
39// ⼤图⽚移动距离=遮挡层移动距离*⼤图⽚最⼤移动距离/遮挡层最⼤移动距离
40var bigImg = document.querySelector('.big_img');
41//⼤图⽚最⼤移动距离
42var bigMax = big.offsetWidth - bigImg.offsetWidth;
43//⼤图⽚的移动距离
44var bigX = maskX * bigMax / maskMax;
45var bigY = maskY * bigMax / maskMax;
46 bigImg.style.left = bigX + 'px'; //这个地⽅视频上说加-号，我没有加的效果是好的，不清楚？
47 bigImg.style.top = bigY + 'px';
49 })。