仿淘寶放大鏡封裝效果，供大家參考，具體內容如下
放大鏡是做好了，但是沒有下面小型導航無法選擇放大圖片，后期我會在封裝出來的。由于考試當前 考完試我會在推出vue的放大效果。以下是代碼：
1.html代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="css/index.css" rel="stylesheet"></head><body><div class="magnify"> <div class="magnify_conatiner"> <div class="magnify_preview"> <img class="sizeimg" src="../../../image/1.jpg" alt=""> <div class="magnif_mask"></div> <div class="margnif_big"> <img class="bigImg" src="../../../image/1.jpg" alt=""> </div> </div> </div></div></div><script src="js/index.js"></script><script> var list = { BackgroundColor:'red',//遮罩層 顏色 必填 Opacity:0.2,//遮罩層透明度 隨意 size:1.5 //放大倍數 必填 } init(list) </script></body></html> |
2.css代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
.magnify_conatiner { width: 500px; height: 500px; margin: 50px 50px;}.magnify_conatiner .magnify_preview { position: relative; height: 400px; border: 1px silver solid; background-color: red;}div.magnify_preview .sizeimg { height: 100%; width: 100%;}.magnify_conatiner .magnify_preview .magnif_mask{ position: absolute; top: 0; left: 0; opacity: .5; border: 1px solid #ccc; cursor: move; display: none;}.margnif_big{ position: absolute; display: none; top: 0px; left: 501px; width: 450px; height: 450px; z-index: 999; border: 1px solid #ccc; overflow: hidden;}.margnif_big img{ position: absolute; top: 0; left: 0;} |
3.封裝的 js代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
function init(obj) { if (obj.BackgroundColor && obj.size) { var maskBigColor = obj.BackgroundColor var maskSize = obj.size var maskOpacity = obj.Opacity if(maskOpacity === undefined){ maskOpacity = 0.2 } var magnify_preview = document.querySelector('.magnify_preview') var mask = document.querySelector('.magnif_mask') var big = document.querySelector('.margnif_big') var bigIMG = document.querySelector('.bigImg') mask.style.height = obj.size * 100 + 'px' mask.style.width = obj.size * 100 + 'px' mask.style.backgroundColor = obj.BackgroundColor mask.style.opacity = maskOpacity magnify_preview.addEventListener('mouseover', function () { mask.style.display = 'block' big.style.display = 'block' }) magnify_preview.addEventListener('mouseout', function () { mask.style.display = 'none' big.style.display = 'none' }) magnify_preview.addEventListener('mousemove', function (e) { var x = e.pageX - this.offsetLeft var y = e.pageY - this.offsetTop var maskX = x - mask.offsetWidth / 2 var maskY = y - mask.offsetHeight / 2 var magnify_previewX = magnify_preview.offsetWidth var magnify_previewY = magnify_preview.offsetHeight var maskMaxX = magnify_preview.offsetWidth - mask.offsetWidth var maskMaxY = magnify_preview.offsetHeight - mask.offsetHeight if (maskX <= 0) { maskX = 0 } else if (maskX >= magnify_previewX - mask.offsetWidth) { maskX = magnify_previewX - mask.offsetWidth } if (maskY <= 0) { maskY = 0 } else if (maskY >= magnify_previewY - mask.offsetHeight) { maskY = magnify_previewY - mask.offsetHeight } mask.style.left = maskX + 'px' mask.style.top = maskY + 'px'//大圖片的移動距離 = 遮擋層的移動距離*大圖片最大移動距離 / 遮擋層最大移動距離 var bigMaxX = bigIMG.offsetWidth - big.offsetWidth var bigImgY = bigIMG.offsetHeight - big.offsetHeight var bigX = maskX * bigMaxX / maskMaxX var bigY = maskY * bigImgY / maskMaxY bigIMG.style.left = - bigX + 'px' bigIMG.style.top = - bigY + 'px' }) } else { console.log('error') }} |
后期考完試我會繼續的，圖片大家自己更改吧，我沒有用網圖
效果展示
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/qq_45557681/article/details/111753155
