Shakker是一个简单而轻量级的jQuery插件,通过在X轴和/或Y轴上摇动图像,可以轻松地为图像添加微妙的失真效果。
1.首先,您需要在页面上包含jQuery库和Shakker插件。
- <script src="/path/to/cdn/jquery.slim.min.js"></script>
- <script src="/path/to/jquery.shaker.min.js"></script>
2.然后,只需选择要应用失真效果的图像元素,并按如下方式调用其上的shakker()函数:
- <img id="example" src="https://www.jqueryscript.net/images/logo.png" />
- $(function(){
- $("#example").shakker();
- });
3.您也可以传入一些可选参数来自定义失真效果。
- $(function(){
- $("#example").shakker({
- x: true,
- y: false,
- });
- });