minimap效果的实现
在项目中，需要制作出缩略图的效果。效果如下：
minimap效果.gif
在firefox可以使用 element属性实现该效果。（其它浏览器暂不支持）。这里使用iframe来达到更好的兼容性。
效果分析
minimap主要是对主体内容进行映射。主体html如下：
<body>
<div class="content">
<p>
文章内容
</p>
<img src="..">
</div>
</body>
我们需要将需要的html内容，嵌入到iframe中。
# 这里获取整个document下的html
let html = document.documentElement.outerHTML
# 将html内容写入到目标iframe中
targetIframe.wirte(html)
整体逻辑是这样。接着实现点击、滚动、拖拽等事件。如果有大量交互行为的页面，需要对minimap做更多的优化。
显示效果的实现
codepen地址
考虑页面加载的延迟效果，我们将minimap的js文件放在body的最后进行引用（当然，建议动态页面考虑其他的方式进行实现）。
minimap所处的div结构应该如下：
<div class="slider">
<iframe class="slider__content">
</div>
<div class="slider__size">
</div>
<div class="slider__controller">
</div>
</div>
iframe的作用就是映射主体的内容的html。后面的 slider__size slider__controller有什么用？
我们对比一下有无后两个div的差别：
效果对比示意
前一个效果没有选择框，无法进行滚动和拖拽。
实际上，slider__size控制显示区域的大小，slider__controller显示目前显示的区域范围。
计算显示区域
minimap的显示区域应该达到以下效果
- iframe中内容的纵横比应该和目标区域的纵横比相同
- iframe中内容应该进行等比例缩放
那么， 我们假设目标内容的宽为px，高为
px，iframe的高为
px， 高度为
px。缩放比例为
那么就有：
js的实现如下
let bodyWidth = body.clientWidth,
# 整体内容的长宽比
bodyRatio = docEl.clientHeight / docEl.clientWidth,
# window的长宽比
winRatio = win.innerHeight / win.innerWidth;
# 设置整个slider区域占父级区域的宽度
slider.style.width = '10%';
# 获取scale的值
realScale = slider.clientWidth / bodyWidth;
# 进行等比例缩放
sliderContent.style.transform = `scale(${realScale})`;
# 为content设置一个宽高。
sliderContent.style.width = (100 / realScale) + '%';
sliderContent.style.height = (100 / realScale) + '%';
这里有一个问题：
- 为什么
sliderContent的值这样设置？
slider__size是如何控制显示区域的大小
首先，我们知道padding区域是一个透明的区域。我们可以通过控制padding区域的大小进而就能控制需要显示的区域。
-
将
slider__size叠加到slider__content上。这里只需要将
slider__content定位属性设置为absolute -
设置
slider__size的padding的宽高
sliderSize.style.paddingTop = (bodyRatio * 100) + '%';
slider__controller做一个定位框
这里应用 padding属性和 boder属性，以及 translate属性。
- padding属性保证定位框透明
- boder属性设置边框
- translate属性控制定位框的移动
定位框的大小比例需要和window的长宽比例保持一致：
controller.style.paddingTop = (winRatio * 100) + '%';
当页面移动时，我们通过设置translate属性值来定位到minimap上的位置。
controller.style.transform = `translate(${win.pageXOffset * realScale}px, ${win.pageYOffset * realScale}px)`;
为minimap增加事件效果
我们需要为minimap增加以下效果：
- 点击minimap，主体内容自动移动到指定位置
- 页面滚动，minimap也随之滚动
- 拖拽定位框，页面也随之进行移动
一般的js程序员，基本会采用以下事件组合
- 鼠标按下（mousedown）触发移动（scrollTo）
- 鼠标移动（mouseMove）触发滚动（scrollBy）
- 鼠标松开（mouseup）停止触发滚动（scrollBy）
- 鼠标不在minimap区域，停止触发移动（scrollTo）
let mouseX = 0,
mouseY = 0,
mouseDown = false;
function pointerDown(e) {
e.preventDefault();
mouseDown = true;
mouseX = e.clientX;
mouseY = e.clientY;
let offsetX = ((mouseX - slider.offsetLeft) - (controller.clientWidth/2)) / realScale;
let offsetY = ((mouseY - slider.offsetTop) - (controller.clientHeight / 2)) / realScale;
win.scrollTo(offsetX, offsetY);
}
slider.addEventListener('mousedown', pointerDown);
function pointerMove(e) {
if (mouseDown) {
x = e.clientX;
y = e.clientY;
win.scrollBy((x - mouseX) / realScale, ((y - mouseY) / realScale));
mouseX = x;
mouseY = y;
}
}
win.addEventListener('mousemove', pointerMove);
function pointerReset(e) {
mouseDown = false;
}
win.addEventListener('mouseup', pointerReset);
function pointerLeave(e) {
if ( e.target === body) {
mouseDown = false;
}
}
当然，制作复杂页面的minimap的时候，会涉及到更加复杂的逻辑交互。可以采用reactJS来进行事件的管理，这里不赘述。有需要的同学可以留言，后期会考虑出一系列reactJS实际应用的例子。
网友评论