淘宝放大镜
//图片地址
let dataArr = [{
small: “./images/imgA_1.jpg”,
middle: “./images/imgA_2.jpg”,
big: “./images/imgA_3.jpg”
}, {
small: “./images/imgB_1.jpg”,
middle: “./images/imgB_2.jpg”,
big: “./images/imgB_3.jpg”
}, {
small: “./images/imgC_1.jpg”,
middle: “./images/imgC_2.jpg”,
big: “./images/imgC_3.jpg”
}];
let artEle = document.querySelector(“article”);
//拼接article的内容
let str = “”;
//初始化页面
function renderImg() {
str += `<section>
<div class=”box”>
<img class=”middleimg” src=”${dataArr[0].middle}” alt=”${0}”>
</div>
<div class=”bigimg”></div>
</section>`;
str += `<section>
<input type=”button” value=”-“>`;
//添加小图片（并添加下标）
dataArr.map((item, index) => {
str += `<img src=”${item.small}” alt=”${index}”>`
})
str += `<input type=”button” value=”+”>
</section>`;
artEle.innerHTML = str;
//先生成在获取节点
let bigEle = document.getElementsByClassName(“bigimg”)[0];
bigEle.style.backgroundImage = `url(‘${dataArr[0].big}’)`;
}
renderImg();
//获取小图父节点、中图、大图的节点
//获取大图div并把它隐藏
let bigEle = document.getElementsByClassName(“bigimg”)[0];
bigEle.style.display = “none”;
//中图图片
let middleimg = document.getElementsByClassName(“middleimg”)[0];
//大中图包含块
let secEle = document.getElementsByTagName(“section”);
//包含中图div
let boxEle = document.getElementsByClassName(“box”)[0];
//生成蒙板
function meng() {
//生成蒙板节点
let asiEle = document.createElement(“aside”);
asiEle.className = “meng”;
asiEle.style.width = (430 / 800) * 430 + “px”;
asiEle.style.height = (430 / 800) * 430 + “px”;
asiEle.style.backgroundImage = `url(“./images/bg.png”)`;
//定位
asiEle.style.position = “absolute”;
asiEle.style.left = 0;
asiEle.style.top = 0;
// 蒙版隐藏
asiEle.style.display = “none”;
//添加蒙板到中图div节点
boxEle.appendChild(asiEle);
}
meng();
//点击小图片，中图和大图进行更换
secEle[1].addEventListener(“click”, e => {
let event = e || window.event;
//获取被点击下图的下标
if (event.target.localName == “img”) {
//大图背景图地址等于被点击的小图的alt
bigEle.style.backgroundImage = `url(${dataArr[event.target.alt].big})`;
// 点击小图时获取小图的alt坐标等于dataArr的坐标的中图地址
middleimg.src = dataArr[event.target.alt].middle;
//点击加号或减号时判断中途的下标
middleimg.alt = event.target.alt;
}
if (event.target.value == “+”) {
//获取当前图片下标
let index = ++middleimg.alt;
//判断是不是最后一张，如果是则停止
index = index >= dataArr.length – 1 ? dataArr.length – 1 : index;
// 把大图的背景图换成相应的图
bigEle.style.backgroundImage = `url(${dataArr[index].big})`;
// 把中图的背景图换成相应的图
middleimg.src = dataArr[index].middle;
}
if (event.target.value == “-“) {
//获取当前图片下标
let index = –middleimg.alt;
//判断是不是最后一张，如果是则停止
index = index <= 0 ? 0 : index;
bigEle.style.backgroundImage = `url(${dataArr[index].big})`;
middleimg.src = dataArr[index].middle;
}
});
//蒙板的显示、隐藏、移动、大图的移动
boxEle.addEventListener(“mouseover”, e => {
let mengEle = document.getElementsByClassName(“meng”)[0];
// 移入box显示蒙版
mengEle.style.display = “block”;
// 移入box显示大图
bigEle.style.display = “block”;
//蒙版可移动区域
boxEle.addEventListener(“mousemove”, e => {
let event = e || window.event;
//鼠标在div可移动的位置= 鼠标在浏览器的位置-鼠标在事件源的位置-鼠标在蒙版中部
mengEle.style.left = event.clientX – boxEle.offsetLeft – mengEle.clientWidth / 2 + “px”;
mengEle.style.top = event.clientY – boxEle.offsetTop – mengEle.clientHeight / 2 + “px”;
//如果蒙版的移动超过或等于0，蒙版的左边边距为0
//让蒙版在div内移动，但蒙版会一部分到div外面
if (parseInt(mengEle.style.left) <= 0) {
mengEle.style.left = 0;
}
//如果蒙版的移动超过或等于0，蒙版的右边边距为0
//让蒙版在div内移动，但蒙版会一部分到div外面
if (parseInt(mengEle.style.top) <= 0) {
mengEle.style.top = 0;
}
//让蒙版在div移动但不会到div外去
if (parseInt(mengEle.style.left) >= boxEle.clientWidth – mengEle.clientWidth) {
mengEle.style.left = boxEle.clientWidth – mengEle.clientWidth + “px”;
}
//让蒙版在div移动但不会到div外去
if (parseInt(mengEle.style.top) >= boxEle.clientHeight – mengEle.clientHeight) {
mengEle.style.top = boxEle.clientHeight – mengEle.clientHeight + “px”;
}
bigEle.style.backgroundPositionX = -((800 / 430) * parseInt(mengEle.style.left)) + “px”;
bigEle.style.backgroundPositionY = -((800 / 430) * parseInt(mengEle.style.top)) + “px”;
})
//移出蒙版和大图隐藏
boxEle.addEventListener(“mouseout”, e => {
mengEle.style.display = “none”;
bigEle.style.display = “none”;
})
})
版权声明：本文为yrs-1216原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。