简介
jRumble 是一个基于 jQuery 的插件,可以用来给网页元素添加随机震动效果。该插件通过修改元素的 CSS 属性实现震动效果,支持多种参数配置以及回调函数。因其易用性和效果显著,常被用来增强网页的交互性和娱乐性。
安装
jRumble 可以通过 npm 安装,执行以下命令:
npm install jrumble
安装完成后,在项目中引入 jRumble 的 js 和 css 文件即可开始使用。
<link rel="stylesheet" href="./node_modules/jrumble/dist/jquery.jrumble.min.css"> <script src="./node_modules/jquery/dist/jquery.min.js"></script> <script src="./node_modules/jrumble/dist/jquery.jrumble.min.js"></script>
使用
jRumble 的使用非常简单。在需要添加震动效果的元素上调用 jrumble()
方法即可。
$('#my-element').jrumble();
此时,当鼠标移入元素时,元素会开始随机震动。如果需要停止震动,可以调用 stopRumble()
方法。
$('#my-element').stopRumble();
参数配置
jRumble 支持多种参数配置,可以通过传入一个对象来进行设置。
-- -------------------- ---- ------- -------------------------- -- -- -- -------- -- -- -- -------- --------- -- -- ---- ------ --- -- ---- -------- ----- -- --------- ----------- --- -- ----- ----------- -- -- ----- --------- ---------- - -- ---- -------------- ------ - ---
示例代码
下面是一个简单的 jRumble 效果示例。当鼠标移入按钮时,按钮开始随机震动并改变颜色。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- -------------- ---------- ----- ---------------- ---------------------------------------------------------- ------- -------------------------------------------------------- ------- ----------------------------------------------------------------- ------- ---------- - ------ ------ ------- ----- ----------------- ----- ------ ------ ---------- ----- ------- ----- - ---------------- - ------- -------- - -------- -------- ------------ - ------------------------- -- -- -- -- ------ --- -------- ----- ----------- --- ----------- -- --------- ---------- - --------------------------------------- ------- - --- -------------------------------- - ------------------------------- -- ---------- - ------------------------------ ------------------------------- -------- --- --- --------- ------- ------ ------- -------------------- ------------ ------- -------
总结
jRumble 是一个简单易用的 jQuery 插件,可以为网页添加随机震动效果。通过该插件的配置和使用,可以实现更加生动有趣的交互效果,增强用户体验和吸引力。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/37020