js实现放大镜!
今天老王交我们写了放大镜
分享一下战果:
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| <style> | |
| * { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| li { | |
| list-style: none; | |
| } | |
| img { | |
| vertical-align: top; | |
| } | |
| .w { | |
| width: 1140px; | |
| margin: 0 auto; | |
| } | |
| .preview-intro { | |
| margin-top: 100px; | |
| } | |
| .preview-intro .preview-wrap { | |
| width: 400px; | |
| float: left; | |
| margin-right: 100px; | |
| /* background-color: coral; */ | |
| position: relative; | |
| } | |
| .preview-intro .preview-wrap .preview { | |
| width: 400px; | |
| height: 400px; | |
| border: 1px solid #000; | |
| position: relative; | |
| } | |
| .preview-intro .preview-wrap .preview .shadow { | |
| width: 150px; | |
| height: 150px; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| display: none; | |
| } | |
| .preview-intro .preview-wrap .preview img { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .preview-scale { | |
| position: absolute; | |
| width: 400px; | |
| height: 400px; | |
| background-color: rgba(125, 255, 255, 0.5); | |
| position: absolute; | |
| left: 500px; | |
| top: 0; | |
| overflow: hidden; | |
| display: none; | |
| } | |
| .preview-scale img { | |
| width: 1066px; | |
| height: 1066px; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| /* z-index: -1; */ | |
| } | |
| .preview-intro .itemInfo { | |
| overflow: hidden; | |
| background-color: pink; | |
| height: 600px; | |
| } | |
| .previewList { | |
| display: flex; | |
| } | |
| .previewList li { | |
| flex: 1; | |
| margin: 10px; | |
| border: 2px solid transparent; | |
| } | |
| .previewList .active { | |
| border-color: red; | |
| } | |
| .previewList li img { | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="preview-intro w"> | |
| <div class="preview-wrap left"> | |
| <div class="preview"> | |
| <div class="shadow"></div> | |
| <img class="smallImg" src="../images/girlsmall1.jpg" alt=""> | |
| </div> | |
| <div class="preview-scale"> | |
| <img class="bigImg" src="../images/girlbig1.jpg" alt=""> | |
| </div> | |
| <div class="previewList"> | |
| <li class="active"><img src="../images/girlsmall1.jpg" bigImg="../images/girlbig1.jpg" alt=""></li> | |
| <li><img src="../images/girlsmall2.jpg" bigImg="../images/girlbig2.jpg" alt=""></li> | |
| <li><img src="../images/girlsmall3.jpg" bigImg="../images/girlbig3.jpg" alt=""></li> | |
| <li><img src="../images/girlsmall4.jpg" bigImg="../images/girlbig4.jpg" alt=""></li> | |
| </div> | |
| </div> | |
| <!-- <div class="itemInfo right"></div> --> | |
| </div> | |
| </body> | |
| <script> | |
| // 放大镜 | |
| // 1. 等比例缩放(放大时 也是等比例的) => 布局 | |
| // shadow smallImg | |
| // ------------ = ---------- | |
| // previewScale bigImg | |
| // 2. 左边 移动的shadow 右边移动的是图片(定位) | |
| // 3. shadow 和 右边大图片移动的方向是相反的,shadow移动的距离和大图片移动的距离也是等比例的 | |
| // smallImgList = [] | |
| // bigImgList = [] | |
| // 下标对应 | |
| var previewWrap = document.getElementsByClassName("preview-wrap")[0]; | |
| var preview = document.getElementsByClassName("preview")[0]; | |
| var shadow = document.getElementsByClassName("shadow")[0]; | |
| var previewScale = document.getElementsByClassName("preview-scale")[0]; | |
| var smallImg = document.getElementsByClassName("smallImg")[0]; | |
| var bigImg = document.getElementsByClassName("bigImg")[0]; | |
| var previewList = document.querySelectorAll(".previewList li"); | |
| // clientWidth/clientHeight 快捷取值 对于隐藏的元素(shadow,previewScale) 不生效 | |
| // 解决方法2 | |
| // b. 等元素显示之后再获取 => 在onmousemove中取值 | |
| var smallImgList = ["../images/girlsmall1.jpg", "../images/girlsmall2.jpg", "../images/girlsmall3.jpg", "../images/girlsmall4.jpg"]; | |
| var bigImgList = ["../images/girlbig1.jpg", "../images/girlbig2.jpg", "../images/girlbig3.jpg", "../images/girlbig4.jpg"]; | |
| for (let i = 0; i < previewList.length; i++) { | |
| let li = previewList[i]; | |
| li.onmouseenter = function () { | |
| for (let j = 0; j < previewList.length; j++) { | |
| previewList[j].classList.remove("active"); | |
| } | |
| this.classList.add("active"); | |
| // 第一种 | |
| // var img = this.children[0]; // li>img | |
| // console.log(img); | |
| // var smallUrl = img.getAttribute("src"); | |
| // var bigUrl = img.getAttribute("bigImg"); | |
| // console.log(smallUrl, bigUrl); | |
| // smallImg.src = smallUrl; | |
| // bigImg.src = bigUrl; | |
| // 第二种 | |
| smallImg.src = smallImgList[i]; | |
| bigImg.src = bigImgList[i]; | |
| } | |
| } | |
| preview.onmouseenter = function () { | |
| previewScale.style.display = "block"; | |
| shadow.style.display = "block"; | |
| } | |
| preview.onmousemove = function (e) { | |
| var e = e || window.event; | |
| // b. 等元素显示之后再获取 => 在onmousemove中取值 | |
| var maxLeft = preview.clientWidth - shadow.clientWidth; | |
| var maxTop = preview.clientHeight - shadow.clientHeight; | |
| console.log(preview.clientWidth, shadow.clientWidth); | |
| // console.log(maxLeft, maxTop); | |
| var scale = previewScale.clientWidth / shadow.clientWidth; //放大镜缩放比例 | |
| console.log(scale); | |
| // 为什么找preview的offsetLeft,offsetTop 值为0; | |
| // 因为布局影响 previewWrap 设置了position:relative,所以此时preview返回的是相对于previewWrap的偏移 0 0 , 为了找到真正偏移 所以我们向外跳了一层 找previewWrap相对于文档左边和上边的偏移 | |
| var x = e.pageX - previewWrap.offsetLeft - shadow.clientWidth / 2; | |
| var y = e.pageY - previewWrap.offsetTop - shadow.clientHeight / 2; | |
| if (x < 0) x = 0; | |
| if (x >= maxLeft) x = maxLeft; | |
| if (y < 0) y = 0; | |
| if (y > maxTop) y = maxTop; | |
| // console.log(previewWrap.offsetLeft, previewWrap.offsetTop); | |
| shadow.style.left = x + "px"; | |
| shadow.style.top = y + "px"; | |
| // 右边移动的是大图片 | |
| bigImg.style.left = -scale * x + "px"; | |
| bigImg.style.top = -scale * y + "px"; | |
| } | |
| preview.onmouseleave = function () { | |
| previewScale.style.display = "none"; | |
| shadow.style.display = "none"; | |
| } | |
| </script> | |
| </html> |
图片加载不出来,但原理不变! 要注意右边盒子消失时,重新计算鼠标到document左边的距离.
哈哈哈哈,写出来还蛮有成就感的!
