前言
先说一个选择器封装函数:
function $1(selector, parent) {
if (selector.charAt(0) == "#") {
return document.getElementById(selector.substring(1));
} else if (selector.charAt(0) == ".") {
return document.getElementsByClassName(selector.substring(1));
} else {
parent = parent || document;
return parent.getElementsByTagName(selector);
}
}
使用方法:
const item = $1(".item")[0];
const screen = $1("#screen");
整体思想
-
鼠标移到外部大盒子上让装大图的盒子显示出来,小盒子的样式改变
-
鼠标在装大图盒子上移动时实现放大效果
-
获取鼠标在屏幕上的位置(pageX和pageY)
-
获取放大镜在屏幕上的位置(让鼠标在发大镜的中间位置所以要减去放大镜宽度的一半)
-
让发大镜在固定的位置内移动(装大图盒子的内部)
-
将放大镜的移动距离赋值给发大镜的top和left值
-
确定放大镜的移动距离和放大图片的移动距离的关系实现放大效果
- screen的移动距离/screen的最大移动距离 = 背景图的移动距离/背景图的最大移动距离
-
-
在点击tab栏时让每一个背景都可以放大,将当前tab的index值当做参数传给magnifier函数,要让刚开始打开页面时的盒子有放大效果,要给magnifier函数传入参数0,在外部调用
-
鼠标离开外部大盒子时让装大图的盒子隐藏
HTML:
<div class="view">
<div class="big">
<div class="big-item" style="display: block;">
<div class="bigLess">
<img src=" " alt="">
</div>
<div class="bigMore">
<img src=" " alt="" class="bigMoreImg">
<div class="screen"></div>
</div>
</div>
<div class="big-item">
<div class="bigLess">
<img src=" " alt="">
</div>
<div class="bigMore">
<img src=" " alt="" class="bigMoreImg">
<div class="screen"></div>
</div>
</div>
<div class="big-item">
<div class="bigLess">
<img src=" " alt="">
</div>
<div class="bigMore">
<img src=" " alt="" class="bigMoreImg">
<div class="screen"></div>
</div>
</div>
<div class="big-item">
<div class="bigLess">
<img src=" " alt="">
</div>
<div class="bigMore">
<img src=" " alt="" class="bigMoreImg">
<div class="screen"></div>
</div>
</div>
<div class="big-item">
<div class="bigLess">
<img src=" " alt="">
</div>
<div class="bigMore">
<img src=" " alt="" class="bigMoreImg">
<div class="screen"></div>
</div>
</div>
</div>
<div class="small">
<div class="hid">
<div class="small-item"><img src=" " alt=""></div>
<div class="small-item"><img src=" " alt=""></div>
<div class="small-item"><img src=" " alt=""></div>
<div class="small-item"><img src=" " alt=""></div>
<div class="small-item"><img src=" " alt=""></div>
</div>
</div>
</div>
CSS:
* {
padding: 0;
margin: 0;
}
.view {
width: 420px;
}
.view .big {
width: 420px;
height: 420px;
margin-bottom: 10px;
position: relative;
}
.view .big-item {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
cursor: crosshair;
}
.view .big-item .bigLess {
width: 420px;
height: 420px;
}
.view .big-item .bigLess img {
width: 100%;
height: 100%;
border-radius: 12px;
}
.view .big-item .screen {
width: 100px;
height: 100px;
position: absolute;
border-radius: 12px;
top: 0;
left: 0;
}
.view .big-item .bigMore {
width: 420px;
height: 420px;
position: absolute;
top: 0;
left: 0;
display: none;
overflow: hidden;
border-radius: 12px;
}
.view .big-item .bigMore .bigMoreImg {
position: absolute;
width: 200%;
height: 200%;
}
.small {
width: 420px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.small .small-item {
width: 62px;
height: 62px;
margin-right: 7px;
border: 1px solid #eee;
border-radius: 6px;
}
.small .small-item img {
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 6px;
}
.small .small-item:hover {
border: 1px solid #f8305b;
}
.hid {
width: 353px;
overflow: hidden;
display: flex;
}
JS:
var bigBox = $1(".big")[0];
var smallItem = $1(".small-item");
var bigItem = $1(".big-item");
var bigMore = $1(".bigMore");
var screen = $1(".screen");
var pic = $1(".bigMoreImg");
// 底部tab栏切换
for (var i = 0; i < smallItem.length; i++) {
smallItem[i].index = i;
smallItem[i].onmouseover = function () {
this.style.borderColor = "#f10180";
};
smallItem[i].onmouseout = function () {
this.style.borderColor = "#eee";
};
smallItem[i].onclick = function () {
var index = this.index;
for (var i = 0; i < smallItem.length; i++) {
bigItem[i].style.display = "none";
smallItem[i].style.borderColor = "#eee";
}
bigItem[this.index].style.display = "block";
smallItem[this.index].style.borderColor = "#f10180";
magnifier(index);
};
}
// 放大镜效果
magnifier(0);
function magnifier(index) {
bigBox.onmouseover = function () {
bigMore[index].style.display = "block";
smallItem[index].style.borderColor = "#eee";
};
bigMore[index].onmousemove = function (e) {
var e = event || window.event;
// 获取鼠标的位置
var X = e.pageX || e.clientX + document.documentElement.scrollLeft;
var Y = e.pageY || e.clientY + document.documentElement.scrollTop;
// 获取screen的位置
var screenX = X - bigBox.offsetLeft - screen[index].offsetWidth / 2;
var screenY = Y - bigBox.offsetTop - screen[index].offsetHeight / 2;
// 确定screen的移动范围
screenX = screenX < 0 ? 0 : screenX;
screenY = screenY < 0 ? 0 : screenY;
var screenXMax = bigBox.offsetWidth - screen[index].offsetWidth;
var screenYMax = bigBox.offsetHeight - screen[index].offsetHeight;
screenX = screenX > screenXMax ? screenXMax : screenX;
screenY = screenY > screenYMax ? screenYMax : screenY;
//确定移动距离
screen[index].style.left = screenX + "px";
screen[index].style.top = screenY + "px";
//确定背景图片的移动距离
// screen的移动距离/screen的最大移动距离 = 背景图的移动距离/背景图的最大移动距离
var picXMax = pic[index].offsetWidth - bigBox.offsetWidth;
var picYMax = pic[index].offsetHeight - bigBox.offsetHeight;
pic[index].style.top = (-screenY / screenYMax) * picYMax + "px";
pic[index].style.left = (-screenX / screenXMax) * picXMax + "px";
};
bigBox.onmouseout = function () {
bigMore[index].style.display = "none";
};
}
//获取ID名和tagName
function $1(selector, parent) {
if (selector.charAt(0) == "#") {
return document.getElementById(selector.substring(1));
} else if (selector.charAt(0) == ".") {
return document.getElementsByClassName(selector.substring(1));
} else {
parent = parent || document;
return parent.getElementsByTagName(selector);
}
}