TL;DR

本文首发于稀土掘金：https://juejin.cn/post/7188749864279212087

当青训营遇上码上掘金 ｜ 会动的名片

作为一个前端工程师🦁️，这次选择的是 主题 1：我的名片，用代码来介绍自己，这太酷了。

话不多说，先看 👀 成品：

小屏不大好看，可以在 code.juejin.cn 或者 self-introduction.icodeq.com 查看全屏幕版本

代码仓库：https://github.com/zkeq/Doraemon/tree/Self-introduction

项目思路

看到题目之后，原本是想要仿写一个闪光 📸️ 卡片的：poke-holo.simey.me

image.png

但是因为技术栈不同，其实是不知道怎么抄。

只能退而求其次，用我之前写过一个 会动的代码：哆啦A梦 作为模版

详情看这里，也是上次的掘金入围作者啦（只是过了初审而已hh）：

🤔，大概就是这样

image.png

其实 js 部分很简单

一些技术细节？

Q1. 首先就是第一个点：如何实现左边代码右边实时效果一起显示呢？

A1: style 属性其实也可以有自己的 class，当我们选中它，并且使用 js 动态的向内添加内容时，页面的样式也会随之变化，那么我们只需要同时向两个元素中添加 css 字符即可，一个用于可视化，一个用于页面的真实渲染。

Q2. 代码块的高亮怎么实现的？

A2: 用 <pre> 标签包起来，然后： highlightjs.org

开始写吧！

那么有了大概的思路，我们就可以开始创作啦。

首先理了一下要放点什么东西来展示，大概就是以下这些：

然后就是找了一堆图，再把简单的框架搭起来。

然后就面临了一个难题，我这是动态添加的 CSS，如何与右边的 HTML 效果 联动呢？

想了很久，最后想到的方法是首先把元素都隐藏起来，然后 CSS 挨个显示

过程中使用 js 滚动视窗：

来实现联动。

听起来很简单，但是我实现起来却是这样的（）（）：

只能是算出来每个代码块的 CSS 是第几个，然后判断一下，很笨，但是勉强能用吧。

后来发现这个方案有个 bug，在掘金的嵌入代码时，最外层的滚动条也会被滚动，影响用户体验

解决方案：

接着就是没什么意思的了，写了一堆适配代码，然后加上了一个好看的按钮样式：

补充：增加了全屏检测以及切换功能：

记录一个 scrollIntoView 的bug

  • 起初我用的是 document.querySelector(".section-0").scrollIntoView(true);
  • 但是我发现这在掘金的嵌入代码预览时，父级页面：也就是浏览器窗口
  • 居然也会跟着滚动，这不是期望发生的行为。
  • 经过查阅很多资料后，使用了一个还算可以的解。

参考资料

让我感到很有意思的是，一个5年前就说应该被修复的 bug 居然留存到了现在( 2023 年)

image.png