(本篇博客基本照抄yalei的原创,我只是知识的搬运工,笑)

我们在使用写轮眼些幻灯片时,会遇到展示庞大网络图或者架构图,比如全力的游戏的人物图谱

可以想象,当使用幻灯片呈现这些关系图时,是很难比较清楚的将细节展示给观众的。如果我们能够使用 zoom in 的方式放大图片,那就完美了。 这里给到了一种使用 jquery-zoom.js 来实现的机制。

直奔主题:

head.js 文件内容

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js'></script>

<script>
(function () {
  $('.hover_large img')
    .wrap('<span style="display:inline-block"></span>')
    .css('display', 'block')
    .parent()
    .zoom();
})();
</script>

header.js 需要加载在主文件内做声明,演示主文件rmd文档示例如下:

---
title: "幻灯忍者"
subtitle: "写轮眼"
author: "谢益辉"
date: "2016/12/12"
output:
  xaringan::moon_reader:
    css: [default, zh-CN.css, header.css]
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
    includes:
      after_body: header.js
---
# 要点

- 关键是`after_body: header.js` 这一行。

- 给图片添加一个`hover_large`的class属性。就有zoom的效果了。


---
.hover_large[
  ![Sharingan](https://pic2.zhimg.com/9ab9a0f5bdf4de19bf2b398f106e876c_r.jpg)
]

最后我们直接预览一下编译完成的幻灯片,我们只需要把鼠标移到想要放大的位置,放大的局部就出现了,enjoy it!