22.4.24 腾讯前端笔试题 放大镜
考察：dom元素的获取，dom元素属性的动态设置，鼠标事件监听，元素宽高的获取，元素位置的获取与设置
元素：
一张小图normal > img，一张大图big > img，一个放大镜lay。
思路：鼠标的事件监听。
mouseover => 鼠标进入小图区域，显示放大镜和大图；
mouseout => 鼠标离开小图区域，隐藏放大镜和大图；
mousemove => 根据鼠标移动的位置，对放大镜和大图进行移动。
设置mouseover mouseout 监听器的代码如下：
normalDiv.addEventListener('mouseover', () => {
// TODO: 放大镜、被放大的图片都显示，渲染为块级元素
normalSpan.style.display = 'block';
bigDiv.style.display = 'block';
})
normalDiv.addEventListener('mouseout', () => {
// TODO: 放大镜、被放大的图片都隐藏，不渲染
normalSpan.style.display = 'none';
bigDiv.style.display = 'none';
}) moveHandler(event, normalDiv, normalSpan, bigImg) {
// tip: 该函数处理放大镜、被放大的图片的显示区域，x、y分别为鼠标在该模块中的位置坐标
const scale = 2
let x = event.clientX - (normalSpan.offsetWidth / 2)
let y = event.clientY - (normalSpan.offsetHeight / 2)
// TODO: 判断临界值，重新设置放大镜、被放大的图片的位置
// 判断临界值
if(x < 0) {
x = 0;
}
if(x > normalDiv.clientWidth - normalSpan.offsetWidth) {
x = normalDiv.clientWidth - normalSpan.offsetWidth;
}
if(y < 0) {
y = 0;
}
if(y > normalDiv.clientHeight - normalSpan.offsetHeight) {
y = normalDiv.clientHeight - normalSpan.offsetHeight;
}
// 移动放大镜和放大图片的位置
normalSpan.style.left = x + 'px';
normalSpan.style.top = y + 'px';
bigImg.style.left = -scale * x + 'px';
bigImg.style.top = -scale * y + 'px';
} 注：用鼠标位置（event.clientX）减去放大镜的边宽/2（normalSpan.offsetWidth / 2）表示放大镜的位置，以此判断放大镜是否在可移动区域内。
虾皮信息成长空间 250人发布
