| Главная » Статьи » Скрипты » Скрипты для uCoz |
 Очень интересный плагин на jQuery, который позволяет вам подсвечивать участки любого изображения, будто вы держите в руке небольшой фонарик. Для начала посмотрите Демо Установка: На страницах, где будет использован данный плагин, в самый низ после тега /body вставляйте: Code <SCRIPT TYPE='text/javascript' SRC='/js/spotlight.js'></SCRIPT> <SCRIPT> $('#test').spotlight(); </SCRIPT> Картинка, к которой будет применён данный эффект, прописывается следующим образом: Code <img src='Ссылка на картинку' width="500" height="300" id='test'> Как видно из кода: width="500" - Ширина картинки Если вы будете, к примеру, использовать несколько картинок, то для каждой картинки нужен будет свой ID и свой код запуска Приведём пример. Мы хотим разместить три разных картинки с этим эффектом. Картинки прописываем так: Code <img src='Ссылка на картинку 1' width="500" height="300" id='test1'> <img src='Ссылка на картинку 2' width="500" height="300" id='test2'> <img src='Ссылка на картинку 3' width="500" height="300" id='test3'> Теперь после /body у нас будет немного другой код: Code <SCRIPT TYPE='text/javascript' SRC='/js/spotlight.js'></SCRIPT> <SCRIPT> $('#test1').spotlight(); </SCRIPT> <SCRIPT> $('#test2').spotlight(); </SCRIPT> <SCRIPT> $('#test3').spotlight(); </SCRIPT> Как вы уже должны были заметить, у нас просто три разных картинки с тремя разными ID. К каждому из этих ID мы приписали свой запускающий скрипт Расскажу ещё об одном нюансе - размеры картинок. К
сожалению, сколько бы ни было картинок, все они должны быть одинакового
размера... Нельзя, чтобы картинка 1 была 300*300, а картинка 2 была
200*300... Это небольшая специфика данного плагина. Если вас не
устраивает приведённая в качестве примера ширина и высота картинок
(500*300) и вы хотите изменить их, то вам придётся так же менять и
размеры тени наложения в основном скрипте, за которые отвечает участок: Code $(vouale).width(500); $(vouale).height(300); Осталось лишь залить скрипт из прикреплённого архива в папку js и картинку spotlight.png в папку images. Так же в архив добавлена оригинальная картинка из примера, на которой вы можете протестировать скрипт Материал подготовлен Apocalypse | |
| Просмотров: 375 | Теги: | Рейтинг: 0.0/0 |
| Всего комментариев: 0 | |
