Reflection.js для MooTools
Reflection.js для MooTools — це модифікований варіант скрипту Reflection.js (дзеркальне відображення), переписаний на основі JavaScript-фреймворку MooTools. Він дозволяє миттєво додати ефект відображення для зображень в сучасних браузерах, маючи доволі невеликий розмір — 2 Кб.
Використання
Давайте на прикладі спробуємо розібратись, як користуватись цим скриптом. Для початку завантажимо архів з сайту проекту (в ньому є також mootools.js) — reflection-1.42.zip (13,28 Кб). Я взяв найсвіжішу версію. На момент, коли ви використовуватимете Reflection, можливо буде нова версія, тож завантажте саме її.
Отже створюємо файл з розширення html для тестування і в тій же папці кладемо малюнок. В моєму випадку це зображення симпатичної червоної панди — файл test.jpg. Вміст html-файлу може бути, наприклад, таким:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reflection.js для MooTools</title>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/reflection.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
$("testReflectionImg").reflect( {opacity: .7} );
});
</script>
</head>
<body>
<p align="center">
<img id="testReflectionImg" src="test.jpg" alt="" />
</p>
</body>
</html>Тепер трохи проясню що й до чого. Спочатку ми робимо звичну для вас справу — під’єднуємо MooTools та Reflection:
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/reflection.js"></script>
Тоді кажемо скрипту, який саме малюнок слід відобразити. В нашому випадку — це малюнок з ID рівним testReflectionImg. Також в опціях задаємо прозорість:
window.addEvent('domready', function() {
$("testReflectionImg").reflect( {opacity: .7} );
});Сумісність
Reflection.js для MooTools працює у всіх браузерах, що підтримують canvas-теґ (полотно): Firefox 1.5+, Opera 9+, Safari 2+, Camino та Google Chrome. Він також працює в Internet Explorer 6+, використовуючи альтернативну техніку малювання.