• Страница 1 из 1
  • 1
Форум Сталкер » Архивная библиотека » Старые скрипты uCoz » Имитация освещения изображений
Имитация освещения изображений
XemorDioДата: Понедельник, 04.04.2016, 07:15 | Сообщение # 1
Генерал-полковник
Группа: Пользователи
Сообщений: 897
Награды: 7
Репутация: 8
Статус: Offline
Очень интересный плагин на jQuery, который позволяет вам подсвечивать участки любого изображения, будто вы держите в руке небольшой фонарик.

Для начала простмотрите Демо

Установка:

На страницах, где будет использован данный плагин, в самый низ после тега /body вставляйте:

Code


<a href="http://letitbit.net/download/74526.738dc7271b92825de232dc04973a/1666_Desktop.rar.html">Скачать архив</a><SCRIPT TYPE='text/javascript' SRC='/js/spotlight.js'></SCRIPT>   
<SCRIPT>   
$('#test').spotlight();   
</SCRIPT>

Картинка, к которой будет применён данный эффект, прописывается следующим образом:

Code
<img src='Ссылка на картинку' width="500" height="300" id='test'>

Как видно из кода:

width="500" - Ширина картинки
height="300" - Высота картинки
id='bth' - Уникальный ID картинки (Для каждой новой картинки нужен свой новый ID)

Если вы будете, к примеру, использовать несколько картинок, то для каждой картинки нужен будет свой 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. Так же в архив добавлена оригинальная картинка из примера, на которой вы можете протестировать скрипт

Скачать архив

 
Форум Сталкер » Архивная библиотека » Старые скрипты uCoz » Имитация освещения изображений
  • Страница 1 из 1
  • 1
Поиск:
Поделись с другими сталкерами
Меню сайта
Гость
Статистика
Интеллектуальный каталог ресурсов интернет