最近在网上闲逛,发现一个特别好玩的 JavaScript 库,叫 RoughNotation。干嘛用的呢?就是在网页上给文字加标注,比如下划线、方框、高亮文字背景等,不过是手写风格的!截图给大家感受下:

怎么样?是不是感觉网页瞬间就生动了?是不是有种手捧纸质书,用彩笔在纸上做笔记的感觉?满满的文艺范!

它支持多种标注形式,除了前面提到的,还有圆圈、叉、删除线等,还能够自定义样式(颜色和粗细等),并且支持动画效果。

使用也很简单,可以通过npm安装:

npm install --save rough-notation

或者直接通过 ES 模块引入(浏览器支持才行):

<script type="module" src="https://unpkg.com/rough-notation?module"></script>

还可以直接引入 IIFE 格式的脚本,这样就会得到一个全局变量RoughNotation

<script src="https://unpkg.com/rough-notation/lib/rough-notation.iife.js"></script>

用法也很简单,找到需要标注的 DOM 元素,调用 API 就行:

import { annotate } from 'rough-notation';

const e = document.querySelector('#myElement');
const annotation = annotate(e, { type: 'underline' });
annotation.show();

更多用法可参考官方文档和 Github 仓库。

作为技术人,其实我们更关心的是它怎么实现的。RoughNotation 基于 RoughJS 这个库开发,后者就是一个用手绘风格绘图的库。打开 Chrome 控制台查看下元素,发现这些标注是通过 SVG 绘制出来的。SVG 使用了绝对定位,根据目标 DOM 元素位置计算坐标。

好了,就简单介绍到这。有兴趣的可以去安装使用下,分分钟让你的页面变得个性十足,快分享给你的小伙伴们吧!

看到这个颇有气质的 logo,不来关注下吗?

只需几行 JavaScript 代码,网页瞬间有气质了!的更多相关文章

  1. 利用ImageAI库只需几行python代码超简实现目标检测

    目录 什么是目标检测 目标检测算法 Two Stages One Stage python实现 依赖 安装 使用 附录 什么是目标检测 目标检测关注图像中特定的物体目标,需要同时解决解决定位(loca ...

  2. 65行 JavaScript 代码实现 Flappy Bird 游戏

    飞扬的小鸟(Flappy Bird)无疑是2014年全世界最受关注的一款游戏.这款游戏是一位来自越南河内的独立游戏开发者阮哈东开发,形式简易但难度极高的休闲游戏,很容易让人上瘾. 这里给大家分享一篇这 ...

  3. 只要200行JavaScript代码,就能把特斯拉汽车带到您身边

    Jerry的前一篇文章 如何使用JavaScript开发AR(增强现实)移动应用 (一) 介绍了用React-Native + ViroReact开发增强现实应用的一些预备知识. 本文咱们开始进入增强 ...

  4. 教你看懂网上流传的60行JavaScript代码俄罗斯方块游戏

    早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下(主要是以注释的形式). 我用C写一个功能基本齐全的俄罗斯方块的话,大 ...

  5. 在PHP中使用CURL,“撩”服务器只需几行——php curl详细解析和常见大坑

    在PHP中使用CURL,"撩"服务器只需几行--php curl详细解析和常见大坑 七夕啦,作为开发,妹子没得撩就"撩"下服务器吧,妹子有得撩的同学那就左拥妹子 ...

  6. 在PHP中使用CURL,“撩”服务器只需几行

    在PHP中使用CURL,“撩”服务器只需几行https://segmentfault.com/a/1190000006220620 七夕啦,作为开发,妹子没得撩就“撩”下服务器吧,妹子有得撩的同学那就 ...

  7. 60行JavaScript代码俄罗斯方块

    教你看懂网上流传的60行JavaScript代码俄罗斯方块游戏   早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下( ...

  8. 只有20行Javascript代码!手把手教你写一个页面模板引擎

    http://www.toobug.net/article/how_to_design_front_end_template_engine.html http://barretlee.com/webs ...

  9. 9 行 javascript 代码获取 QQ 群成员

    昨天看到一条微博:「22 行 JavaScript 代码实现 QQ 群成员提取器」. 本着好奇心点击进去,发现没有达到效果,一是 QQ 版本升级了,二是博客里面的代码也有些繁琐. 于是自己试着写了一个 ...

  10. java开发区块链只需150行代码

    本文目的是通过java实战开发教程理解区块链是什么.将通过实战入门学习,用Java自学开发一个很基本的区块链,并在此基础上能扩展如web框架应用等.这个基本的java区块链也实现简单的工作量证明系统. ...

随机推荐

  1. js 把数字转成2 ,8,16进制的方法

    直接上代码 <!DOCTYPE html> <html> <body> <script> var myNumber = 128; document.wr ...

  2. JAVA Web day01--- Android小白的第一天学习笔记

    HTML 1.HTML的概述 1.1.HTML简介 l HTML(Hyper Text Markup Language):超文本标记语言. >标记就是标签 >HTML不是一种编程语言,而是 ...

  3. 用ConfigParser模块读写配置文件——Python

    对于功能较多.考虑用户体验的程序,配置功能是必不可少的,如何存储程序的各种配置? 1)可以用全局变量,不过全局变量具有易失性,程序崩溃或者关闭之后配置就没了,再者配置太多,将变量分配到哪里也是需要考虑 ...

  4. POJ 1001 Exponentiation

    题意:求c的n次幂……要求保留所有小数…… 解法:一开始只知道有BigInteger……java大数+模拟.第一次写java大数……各种报错各种exception……ORZ 没有前导0和小数后面的补位 ...

  5. awr报告基本操作

    1.查看当前的AWR保存策略.设置:快照间隔.保存时间. SQL> col SNAP_INTERVAL format a20    SQL> col RETENTION format a2 ...

  6. linux 挂载 镜像文件

    挂接命令(mount) 命令格式: mount [-t vfstype] [-o options] device dir 其中: 1.-t vfstype指定文件系统的类型,通常不必指定.mount会 ...

  7. 华硕K55DR体验 - 显卡就是坑

    朋友拿来电脑,本来他室友已经把他电脑重做完了,但还是卡,非要给我再搞一遍,难道?我就是传说中的大神?咳咳...YY一下,适可而止 华硕K55DR的配置来看,似乎应付CF没什么问题,可是,FPS各种不稳 ...

  8. HDU 5758 Explorer Bo

    思维,树形$dp$. 首先选择一个度不为$0$的节点作为根节点,将树无根转有根. 这题的突破口就是要求瞬间移动的次数最少. 次数最少,必然是一个叶子节点走到另一个叶子节点,然后瞬间移动一次,再从一个叶 ...

  9. Visual Studio Code 背景色自定义

    1 寻找主体配置文件:默认的颜色主题配置文件都位于$RELEASE/resources/app/extensions目录中.以theme-开头的目录即为颜色主题配置(事实上,其中有些是文件图标主题). ...

  10. 【SQL】ROW_NUMBER() OVER(partition by 分组列 order by 排序列)用法详解+经典实例

    #用法说明 select row_number() over(partition by A order by B ) as rowIndex from table A :为分组字段 B:为分组后的排序 ...