pagemap

pagemap 是一个轻量级的网页小地图组件,能够快速为网页中的 DOM 内容生成可视化小地图,支持拖拽滚动页面,单文件引入且配置简单。

Check out pagemap on CurateClick

• Copy the embed code to showcase this product on your website

• Share on X to spread the word about this amazing tool

pagemap这是一个能快速为你的网页中的 dom 内容生成小地图的组件,使用 querySelector,默认使用 dom 背景色,可以进行拖拽以滚动页面。<img width="232" alt="截屏2024-06-21 10 02 45" src="https://github.com/ruanyf/weekly/assets/60283556/d99c0781-cb39-40b2-939b-c6d1ac0e74cc">## 项目地址pagemap## UsageCSScss#map { position: fixed; top: 0; right: 0; width: 200px; height: 100%; z-index: 100;}HTMLhtml<canvas id="map"></canvas>Scriptjavascript<script src="./pagemap.js"></script>;var pageInstance = null;document.addEventListener("DOMContentLoaded", () => { // pageMap使用需要等到页面加载完成 pageInstance = pagemap(document.querySelector("#map"), { // viewport: document.getElementById("board"), viewport: null, styles: { // 注意:要展示在前面的元素要写在后面 // "#topPanel": "rgba(0,0,0,0.08)", // ".list,.add-list": "rgba(0,0,0,0.3)", ".list,.add-list": "default", // ".card": "rgba(0,0,0,0.5)", ".card": "default", // "h2,h3,h4": "rgba(0,0,0,0.08)", }, back: "rgba(0,0,0,0.2)", // view: "rgba(0,0,0,0.4)", // drag: "rgba(0,0,0,0.4)", view: "default", drag: "rgba(0,0,0,0.4)", interval: null, });});## 刷新有两种方式:一种是设置 styles.interval (单位:ms),minimap 就会进行自动刷新javascriptif (settings.interval > 0) { setInterval(() => draw(), settings.interval);}一种是使用 api,在合适的逻辑点进行调用:javascriptpageInstance.redraw();

Latest Weekly Picks

make.ink favicon
Weekly Pick

Your AI tattoo generator for pro-grade concepts

Leo Wade
sellfy.com favicon
Weekly Pick

A code-free online store builder to turn views into revenue. Sell digital products, subscriptions, and merch, without fees or hassle.

Maris
www.videotoblog.ai favicon
Weekly Pick

Convert videos into awesome blog posts.

Video To Blog
www.sellerpic.ai favicon
Weekly Pick

SellerPic is the all-in-one AI design platform for e-commerce

SellerPic
fastimage.ai favicon
Weekly Pick

Fast Image AI instantly transforms your photos into stunning styles like Ghibli, Sketch, and Pixar. Effortlessly control image elements and create amazing effects with just one click.

Fast AI Team
linkedinpro.daisy.so favicon
Weekly Pick

AI-powered tool that transforms casual photos into professional LinkedIn headshots instantly. No photographer needed—just upload and download.

Gabriel
crevas.ai favicon
Weekly Pick

Crevas unifies Veo 3, Sora 2, Nano Banana and more into one intuitive canvas — so filmmakers can script, prompt, and generate cinematic stories without switching tools or losing consistency.

Spark Alpha
fotominiatur.com favicon
Weekly Pick

AI Foto Edit - Text to Image & Image Edit

foto miniatur