mootools_jQuery和MooTools的图像反射

た入场券 2023-02-21 15:30 161阅读 0赞

mootools

[![Christina Ricci][]][Christina Ricci 1]

One subtle detail that can make a big difference on any web design is the use of image reflections. Using them too often can become obnoxious but using reflections on large, "masthead" images is a classy enhancement. Unfortunately creating image reflections within your graphics application can be time-consuming, especially when an image can potentially change frequently. Luckily Christophe Beyls has created [Reflection.js][].

可以在任何网页设计上产生重大变化的一个细微细节是图像反射的使用。 过于频繁地使用它们可能会令人讨厌，但是在大型“标头”图像上使用反射是一种出色的增强。 不幸的是，在图形应用程序中创建图像反射可能会非常耗时，尤其是当图像可能频繁更改时。 幸运的是Christophe Beyls创建了[Reflection.js][] 。

Reflection.js is a JavaScript utility available in both jQuery and MooTools that creates reflections for any images in a page. Reflection.js creates a new IMG element with special filters if the client is using IE -- if the client is not IE, Reflection.js creates a CANVAS element and constructs the reflection within the canvas.

Reflection.js是jQuery和MooTools中都可用JavaScript实用程序，可为页面中的任何图像创建反射。 如果客户端使用IE，则Reflection.js会创建一个带有特殊过滤器的新IMG元素；如果客户端不是IE，则Reflection.js会创建一个CANVAS元素并在画布中构造反射。

[View Demo][Christina Ricci 1] [观看演示][Christina Ricci 1]

## HTML **(**The HTML**)** ##

Add the reflect CSS class to any image you'd like to reflect.

将反射 CSS类添加到您要反射的任何图像。

## MooTools JavaScript用法 **(**The MooTools JavaScript Usage **)** ##

window.addEvent('domready',function() {
    	var options = { height: 0.5 };
    	$$('img.reflect').each(function(img) {
    		img.reflect(options);
    	});
    });

The MooTools version of Reflection.js implements the reflect method to create reflections.

Reflection.js的MooTools版本实现了reflect方法来创建反射。

## jQuery JavaScript的用法 **(**The jQuery JavaScript Usage**)** ##

document.ready(function() {
    		var options = { opacity: 0.75 };
    		$('.reflect').reflect(options);
    	});

Much like MooTools method, you execute each element's reflect method.

与MooTools方法非常相似，您可以执行每个元素的反射方法。

[View Demo][Christina Ricci 1] [观看演示][Christina Ricci 1]

Christophe's Reflection.js code is a great piece of work! Don't waste time making reflections in Photoshop -- use the power of JavaScript!

Christophe的Reflection.js代码是一件很棒的工作！ 不要浪费时间在Photoshop中进行反思-使用JavaScript的强大功能！

> 翻译自: [https://davidwalsh.name/javascrip-reflection][https_davidwalsh.name_javascrip-reflection]

mootools

[Christina Ricci]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9yaWNjaS1yZWZsZWN0LnBuZw?x-oss-process=image/format,png
[Christina Ricci 1]: https://davidwalsh.name/demo/mootools-reflection.php
[Reflection.js]: http://www.digitalia.be/software/reflectionjs-for-mootools
[https_davidwalsh.name_javascrip-reflection]: https://davidwalsh.name/javascrip-reflection