Reflection.js 实现图片倒影效果的 JS 插件 - 文章教程

Reflection.js 实现图片倒影效果的 JS 插件

发布于 2021-01-03 字数 4238 浏览 1181 评论 0

Reflection.js 允许您向网页上的图像添加倒影。它使用简洁的 JavaScript 保持代码干净,提供了多个配置参数,可灵活控制倒影的显示效果。

Reflection.js 实现图片倒影效果的 JS 插件

它适用于所有主要浏览器

  • Internet Explorer 5.5 +
  • Mozilla Firefox 1.5 +
  • Safari
  • Google Chrome
  • Opera 9+

在较旧的浏览器上,它将降级,并且您的访客不会注意到任何事情。最棒的是轻量级,压缩以后它不到 5KB。

配置

下载 Reflection.js 并将其包含在您的网页中。

<script type="text/javascript" src="reflection.js"></script>

使用它

要添加反射,只需向图像添加 class="reflect"

<img src="mm1.jpg" class="reflect" />

注意:

  • 无兼容性问题(IE7,IE8通过私有滤镜做了兼容处理);
  • 此 js 对图片 <img> 外部又重新写入了一个 <div>,如果需要多图排列,则需要对此 <div> 标签进行控制。

Reflection.js 实现图片倒影效果的 JS 插件

倒影将自动淡入背景色。

如果您运行 forum,则可以修改模板并将class =“ reflect” 添加到头像 HTML 代码中以添加投影。

自定义思考

默认情况下,反射的高度为原始图像的50%。因此,具有反射的图像的高度将是原始图像高度的1.5倍。反射的默认不透明度为50%。

改变高度

您可以通过在CSS类列表中添加高度和所需的百分比高度来改变反射的高度。

要使用原始图像高度33%的反射,请执行以下操作:

class="reflect rheight33"

Reflection.js 实现图片倒影效果的 JS 插件

提示:特别是对于较大的照片,小的反射效果很好(尝试10%)。

改变不透明度

您可以通过在CSS类列表中添加不透明度和所需的不透明度百分比来改变反射的不透明度。

要使用不透明度为30%的反射,请执行以下操作:

class="reflect ropacity30"

Reflection.js 实现图片倒影效果的 JS 插件

您可以结合使用这两个选项。要创建80%高度,40%不透明度反射,请使用:

class="reflect rheight80 ropacity40"

脚本思考

如果您需要大量的灵活性,请使用脚本化倒影。您可以使倒影响应用户操作(例如,将鼠标悬停在上方时更改倒影不透明度),也可以将倒影添加到脚本(例如Lightbox)中。

添加

Reflection.add(image, options);

使用 JavaScript 向图像添加或修改倒影。如果图像已经倒影,但是指定的不透明度或高度已更改,则倒影将相应更改。

image 应该是图像元素。

选项可以包含不透明度或高度的值。两个值都应介于0和1之间。

Reflection.add(document.getElementById("ohboy"), { height: 3/4, opacity: 2/3 });

移除

Reflection.remove(image);

消除图像的倒影。

Reflection.remove(document.getElementById("orly"));

动态修改参数

Reflection.defaultHeight = height;
Reflection.defaultOpacity = opacity;

更改倒影的默认高度和不透明度。两种设置的默认值为 0.5。

已知的问题

  • 动画图像的反射只能在 Internet Explorer 中正常工作。
  • 如果您在 IE 中页面 / div 底部附近倒影图像,则可能会创建空白。

在线示例

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论