html代碼

<div id="content"><div id="box"><img src="imgs/1-large.jpg" class="middle"><div id="filter"></div></div><div id="max"><img src="imgs/1-large.jpg" id="maxImg"></div><div><img src="imgs/1-small.jpg" class="small" data-url="imgs/1-large.jpg"><img src="imgs/2-small.jpg" class="small" data-url="imgs/2-large.jpg"><img src="imgs/3-small.jpg" class="small" data-url="imgs/3-large.jpg"><img src="imgs/4-small.jpg" class="small" data-url="imgs/4-large.jpg"><img src="imgs/5-small.jpg" class="small" data-url="imgs/5-large.jpg"></div> </div>

css代碼

* {margin: 0;padding: 0;}#content {position: relative;}#box {width: 400px;height: 400px;border: 1px solid #000;position: relative;}#box > img {width: 400px;height: 400px;}#filter {width: 200px;height: 200px;background: #000;opacity: 0.6;position: absolute;left: 0;top: 0;display: none;cursor: move;}.small {margin: 0 10px;border: 1px solid #fff;}.small:hover {border-color: #000;}#max {position: absolute;left: 430px;top: 0;width: 400px;height: 400px;overflow: hidden;}#maxImg {width: 800px;height: 800px;position: absolute;left: 0;top: 0;}

JS代碼

/*建議 小方塊 中圖 以及大圖的比例是 1:2:4*/var aSmall = document.querySelectorAll(".small");var omiddle = document.querySelector(".middle");var oBox = document.getElementById("box");var oFilter = document.getElementById("filter");var maxImg = document.getElementById("maxImg");for (var i = 0; i < aSmall.length; i++) {aSmall[i].onmouseover = function () {var src = this.getAttribute("data-url");omiddle.src = src;maxImg.src = src;}}/放大鏡//maxImg.style.display = "none";oBox.onmouseover = function () {maxImg.style.display = "block";oFilter.style.display = "block";this.onmousemove = function (e) {var e = e || event;var l = e.clientX - oFilter.offsetWidth / 2;var t = e.clientY - oFilter.offsetHeight / 2;l = l >= oBox.offsetWidth - oFilter.offsetWidth ? l = oBox.offsetWidth - oFilter.offsetWidth : (l <= 0 ? l = 0 : l = l);t = t >= oBox.offsetHeight - oFilter.offsetHeight ? t = oBox.offsetHeight - oFilter.offsetHeight : (t <= 0 ? t = 0 : t = t);oFilter.style.left = l + 'px';oFilter.style.top = t + 'px';maxImg.style.left = -2 * l + 'px';maxImg.style.top = -2 * t + 'px';}};oBox.onmouseout = function () {oFilter.style.display = "none";maxImg.style.display = "none";}

總結

以上是生活随笔為你收集整理的商品图片放大镜的JavaScript实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。