Три варианта манипуляции с изображением благодаря jQuery

·	25.09.2013, 19:06
Всем привет, сегодня я решил предоставить небольшой вариант скрипта, благодаря которому можно провести парочку манипуляций с вашими изображениями на сайте, я думаю многие читатели блога не раз видели на том или ином сайте, некоторые манипуляции с изображением, к примеру при наведении стрелкой мыши на картинку, она меняла свой вид, из чёрного белого или размытого, превращалось в обычное цветное, если вы не понимаете о чём идёт речь, смотрим демо... Шаг 1 - Установим JS: Напоминаю, что в систему uCoz уже вшита библиотека jQuery, поэтому нам стоит лишь прописать в конце страницы перед тегом </body> два скрипта, отвечающие за манипуляцию вашего изображения: JS `<script type="text/javascript" src="http://ucoz-helper.ucoz.com/js_jquery/hoverizr.js"></script><script type="text/javascript"> $(window).load(function() { $('.ex1').hoverizr({speedOut: 'slow'}); $('.ex2').hoverizr({speedOut: 'slow',effect:"blur",overlay: "bottom",container: "pipa",stretch: "no"}); $('.ex4').hoverizr({effect:'blur',speedOut:'slow'}); $('.ex3').hoverizr({speedIn: 'slow',effect:"invert"}); }); </script>` Обратите внимания, что во втором скрипте указанны классы .ex1 .ex2 .ex3 и .ex4 которые отвечают за один из четырёх видов отображения вашей картинки на сайте. Шаг 2 - Установим HTML: Теперь нам осталось прописать один из выше предоставленных классов, в ваше изображение: HTML `<img class="ex2" src="ссылка на изображение" alt="описание изображения" />` всё решение готово... Примечание: Но, что делать если к примеру вы столкнулись с такой проблемой, что нужному изображению нельзя прописать нужный вам класс, к примеру если вы заливаете изображение новостей через встроенную форму на странице добавление и редактирование материала, тут тоже всё просто как дважды два: Нам стоит создать контейнер div с нужным классом, в который мы поместим системную переменную (IMAGE1) отвечающею за вывод отображения вашего изображения HTML `<div class="primer_ex1">системная переменная</div>` а в самом js, прописать нужный класс ячейки div и сказать ему, что в этой ячейки находиться картинка, благодаря метки img: JS `<script type="text/javascript"> $(window).load(function() { $('.primer_ex1 img').hoverizr({speedOut: 'slow'}); $('.primer_ex2 img').hoverizr({speedOut: 'slow',effect:"blur",overlay: "bottom",container: "pipa",stretch: "no"}); $('.primer_ex3 img').hoverizr({effect:'blur',speedOut:'slow'}); $('.primer_ex4 img').hoverizr({speedIn: 'slow',effect:"invert"}); }); </script>` вот и всё, наше с вами решение готово.
1 2 3 4 5 Категория: jQuery и JS \| Добавил: tashkent97
Просмотров: 712 \| Загрузок: 309 \| Источник: center-dm.ru \| Рейтинг: 5.0/1

Всего комментариев: 0