Создание зеркального отражения для изображений
Скрипт reflection.js позволяет добавлять эффект зеркального отражения к изображениям на странице. Результат выглядит следующим образом:
Подключаем скрипт reflection.js в разделе head HTML-страницы
<script src="reflection.js" type="text/javascript"></script>
а для изображений добавляем класс reflect
<img src="image.jpg" class="reflect" alt="" />
По умолчанию размер зеркального отражения равен половине высоты изображения, а уровень прозрачности равен 50%. Чтобы изменить эти параметры, нужно добавить классы rheight и ropacity со значениями высоты и прозрачности:
<img src="image.jpg" class="reflect rheight40 ropacity60" alt="" />
Зеркальным отражением можно управлять из скрипта:
- добавить или изменить существующее отражение; height и opacity могут принимать значения от 0 до 1
Reflection.add(document.getElementById("imageID"), { height: 3/4, opacity: 2/3 });
- удалить существующее зеркальное отражение
Reflection.remove(document.getElementById("imageID"));
- изменить значения по умолчанию для высоты и прозрачности отражения; по умолчанию оба равны 0.5
Reflection.defaultHeight = height;
Reflection.defaultOpacity = opacity;
Reflection.defaultOpacity = opacity;
аня:
Думаю такие странички будут смотерться просто замечательно. Главное, что таких страниц не много в инете.
20 Декабрь 2008, 14:40Тёма:
Замечательная статья, админ молодец.
5 Февраль 2009, 10:33Ромыч:
Извините за тупой вопрос, но куда этот скрипт устанавливать на CMS Slaed. Я просто новичок, и все что вы пишите мне очень интересно, но зачастую непонятно.
24 Июнь 2009, 9:41admin:
Ромыч, здесь я помочь ничем не могу - не приходилось иметь дело с CMS Slaed. Скорее всего, надо добавить в файл шаблона в раздел <head>
А для картинок добавить класс class=”reflect”. Если вывод картинок автоматический, с помощью скрипта, то придется править нужный php-файл.
24 Июнь 2009, 10:31Ромыч:
Я короче полный нуб походу. Буду пробывать, думаю методом тыка у меня что-нибудь получится. Медведя же учат на велике кататься. Так что спасибо за помощь. Уважаю.
24 Июнь 2009, 19:41linka:
выражаю вам преогромную благодарность! :*
30 Июль 2009, 10:38