oyomirror是一个小型且可自定义的jQuery插件，可用于使用SVG创建图像的反射和镜像。

反射和镜像效果是当今博客网站和投资组合网站的必备品。这些效果经常被用来以更吸引人的方式展示公司标志或博客标题图像。

如何使用它:

1.加载最新的jQuery库后，包括主脚本oyomirrr.js。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/oyomirror.js"></script>

2.在目标图像上调用函数oyoMirror，并使用以下参数配置反射和镜像效果：

• 图像：目标图像
• 侧面：顶部、右侧、底部或左侧
• 零件尺寸：仅镜像图像的一部分
• 度：度
• 观点：CSS透视属性

<img class="image" src="1.jpg" alt="Image" />

var image = $(".image")[0];
// oyoMirror(image, side = "bottom", partSize = "25%", degrees = 90, perspective)
var myMirror = new oyoMirror(image, "bottom", "25%", 90);

3.将镜像附加到您指定的容器：

$("body").append(myMirror);

4.更改图像镜像的不透明度：

// changeOpacity(startOpacity = 1, endOpacity = 0);
myMirror.changeOpacity(0.75, 0);

5.更改镜像的渐变色：

// changeFadeColor(color);
myMirror.changeFadeColor("tomato");

更新日志：

2022-05-15

• JS更新

预览截图

jQuery和SVG 图像反射和镜像效果