jQuery Shakker插件创建图像失真效果

  • 源码大小:7.37KB
  • 所需积分:1积分
  • 源码编号:19JP-3246
  • 浏览次数:771次
  • 最后更新:2023年05月22日
  • 所属栏目:动画
本站默认解压密码:19jp.com 或 19jp_com

简介

Shakker是一个简单而轻量级的jQuery插件,通过在X轴和/或Y轴上摇动图像,可以轻松地为图像添加微妙的失真效果。

参见:

  • jQuery插件用于动画故障效果-mglitch

如何使用它:

1.首先,您需要在页面上包含jQuery库和Shakker插件。

  1. <script src="/path/to/cdn/jquery.slim.min.js"></script>
  2. <script src="/path/to/jquery.shaker.min.js"></script>

2.然后,只需选择要应用失真效果的图像元素,并按如下方式调用其上的shakker()函数:

  1. <img id="example" src="https://www.jqueryscript.net/images/logo.png" />
  1. $(function(){
  2. $("#example").shakker();
  3. });

3.您也可以传入一些可选参数来自定义失真效果。

  1. $(function(){
  2. $("#example").shakker({
  3. x: true,
  4. y: false,
  5. });
  6. });

预览截图