前端开发中，我们常常需要使用各种库和框架来辅助开发。而 npm 包是我们常见的一种。
本文就来介绍一个非常有意思的 npm 包 @shortcm/ripple，它可以用来实现鼠标悬浮时的水波纹效果。
简介
@shortcm/ripple 是一款基于 jQuery 的水波纹效果库。它不仅可以实现传统的圆形水波纹效果，还能够实现自定义形状的水波纹效果。
这个库的好处在于它非常轻量级，只有不到 2KB，而且使用简单，可以在几分钟内轻松上手。
安装和使用
首先，我们需要在项目中安装 @shortcm/ripple。
npm install @shortcm/ripple
安装成功后，我们就可以在项目中使用它了。
下面是一个简单的例子，展示如何使用它来实现圆形的水波纹效果。
<div class="box">点击我试试看</div>
import $ from "jquery";
import "shortcm-ripple";
$(".box").ripple();现在刷新页面，点击那个 div，就可以看到鼠标点击时的圆形水波纹效果了。
参数
@shortcm/ripple 支持一些参数来定制水波纹效果，下面是它的默认参数：
{
speed: 400, // 动画速度
radii: 0.6, // 水波纹半径
elem: null, // 触发水波纹效果的元素，如果不设置，默认为绑定 ripple 的元素
type: "circle", // 水波纹类型，可选值：circle、rect、poly
color: "#fff", // 水波纹颜色
timing: "ease", // 动画效果，可选值：ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)
}我们可以在调用 ripple 的时候，传入这些参数来自定义水波纹效果。
下面是一个例子，展示如何使用这些参数来实现一个绿色矩形的水波纹效果：
<div class="box">点击我试试看</div>
import $ from "jquery";
import "shortcm-ripple";
$(".box").ripple({
type: "rect",
color: "green",
radii: 0.2
});这个例子中，我们把水波纹效果设为矩形，颜色设为绿色，半径设为 0.2。
自定义形状
除了上面介绍的几种类型外，@shortcm/ripple 还支持自定义形状。
比如，我们可以为它传入一个路径数组来绘制自定义的形状：
<svg class="icon" viewBox="0 0 1024 1024"> <path d="M394.666667 256h234.666666a32 32 0 0 1 32 32v234.666667a32 32 0 0 1-32 32H394.666667a32 32 0 0 1-32-32V288a32 32 0 0 1 32-32z m341.333333 362.666667h-128V512h128v106.666667z m-106.666666-298.666667H384v166.4l-81.066667-81.066667a32 32 0 0 0-45.226666 45.226667l117.333333 117.333333a32 32 0 0 0 22.613333 9.386667 31.808 31.808 0 0 0 22.613333-9.386667l117.333334-117.333333a32 32 0 0 0-22.826667-54.613333z m13.653333 352a31.914667 31.914667 0 0 0-22.613333 9.386667l-117.333333 117.333333a32 32 0 0 0 45.226666 45.226667l81.066667-81.066667V853.333333H640V746.666667h-128v-106.666667h128V426.666667H234.666667v213.333333h128V640H213.333333a32 32 0 0 0 0 64h554.666667a31.914667 31.914667 0 0 0 22.613333-9.386667L919.466667 481.28a32 32 0 0 0-45.226667-45.226667l-117.333333 117.333333a31.914667 31.914667 0 0 0-9.386667 22.613334v170.666666H682.666667V746.666667H810.666667v106.666666z"></path> </svg>
-- -------------------- ---- ------- ------ - ---- --------- ------ ----------------- -------- --------------- ----- ------- ----- ------------- ----------------- -- - - - -- ---------------- -- - - ---- ---------------- -- - - -------------- -- - - - -------- ------------ ----------------------------------------------- -- - - ----------- ------------------- ------------------- --------- - - - --------- -------- --------- --------- - - - ----------------------------------------- -- - - ---------------------- ---------- -------------------- --------- - - ----------- ------------------- ------------ -- - - - --------- --------------------------------------------------------------------------------------------------------------------------- ------ ---------- ------ --- ---
在这个例子中，我们传入一个 SVG 路径数组，来绘制出一条自定义的路径。
结束
以上就是 @shortcm/ripple 的使用教程，不难看出这个库不仅非常有趣，而且使用也很简单。
如果你想让你的网站页面更加生动有趣，可以试试这个库。另外，关于这个库更多的详细内容可以参考官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a130d09270238223ab