# 图片版词典里加放大镜

**URL:** <https://forum.freemdict.com/t/topic/6905>\
**Category:** 技术交流与词典编修\
**Tags:** 放大, 图片版, 地图\
**Created:** [2021 年6 月 20 日 10:00 UTC](https://forum.freemdict.com/t/topic/6905 "2021-06-20T10:00:24Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mandolin](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/mandolin/32/4948_2.png) [@Mandolin](https://forum.freemdict.com/u/Mandolin)\
**Post date:** [2021 年6 月 20 日 10:00 UTC](https://forum.freemdict.com/t/topic/6905/1 "2021-06-20T10:00:24Z")

</div>

一直有制作地图相关 mdx 词典的想法，但印象中在 mdx 里图片的缩放不是很方便，远远没有看图软件灵活。

本人不太懂 js，照搬网上的代码试了下，做了一个简陋的放大镜，勉强能用：

![9WxwS7MvD5](https://forumcdn.freemdict.com/uploads/default/original/2X/e/e6b188815c9c2d96e82f8c82e2ab7ee32bec8821.gif)

 ![image](https://forumcdn.freemdict.com/uploads/default/original/2X/2/2bb72393e51d84d87a05735385cc7035c86ec7ef.jpeg)

 ![image](https://forumcdn.freemdict.com/uploads/default/original/2X/3/3f6178f3f2dd6079f5a4e3d0dccfe1d0a5908835.jpeg)

不过只在GoldenDict、MDict 等电脑端可用，放手机上会有问题。另外，这个实现也不是很完美，其中的图片只能写死固定的大小（比如1080×720），不能自适应屏幕宽度（width=100%）；放大镜的位置也只能是固定位置（下翻的时候会跟着跑）。

总而言之，还算可以用，但实现粗糙，有局限，下面是测试用 mdx，有需要的可以拿去加进自己的 mdx：

[test\_zoom.zip](https://forum.freemdict.com/uploads/short-url/iFERR1iSqQULtiBAsPkt7OZVxqZ.zip) (842.0 KB)

如有懂 js 的大佬能写个更好用的放大镜就再好不过了。

---

<div class="post-metadata">

**Author:** ![hua](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/hua/32/11090_2.png) [@hua](https://forum.freemdict.com/u/hua)\
**Post date:** [2021 年6 月 20 日 10:43 UTC](https://forum.freemdict.com/t/topic/6905/2 "2021-06-20T10:43:40Z")

</div>

[![](https://forumcdn.freemdict.com/uploads/default/original/3X/7/b/7b555ef6be4faa9a2094b3ea192b39b4e6bed964.jpeg "超簡易放大鏡效果｜CSS｜JavaScript") ](https://www.youtube.com/watch?v=t4lZO2UlqhI)

---

<div class="post-metadata">

**Author:** ![Mandolin](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/mandolin/32/4948_2.png) [@Mandolin](https://forum.freemdict.com/u/Mandolin)\
**Post date:** [2021 年6 月 20 日 23:56 UTC](https://forum.freemdict.com/t/topic/6905/3 "2021-06-20T23:56:31Z")

</div>

![d3CyWIUT3k](https://forumcdn.freemdict.com/uploads/default/original/2X/4/4c48b7c72599bf8a6834e0438a5925f888b426bd.gif)