Увеличение изображения при наведении курсора мыши JQuery

Дата редактирования: 12.03.2015 Просмотрен: 19901

Пример работы скрипта

Появилась задача сделать увеличивающиеся в размерах изображения при наведении курсора мыши.

Скачиваем и распаковываем архив. Файлы jquery-1.6.1.min.js и zoomi.js

Скопируйте файлы в удобную для Вас папку на сервере. Откройте файл index Вашего сайта или страницы на которой нужен эффект и сделаете ссылки на файлы которые вы скопировали. Приблизительно так

<script type="text/javascript" src="/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="/js/zoomi.js"></script>

Теперь что бы скрипт с работал можно использовать 2 способа:

1. Присвоить тегу img атрибуты class="zoomi" и alt="url" - Скрипт будет увеличивать изображение с классом zoomi и брать картинку по адресу alt="image2.jpg".

Пример:

<img class="zoomi" src="/image1.jpg" alt="image2.jpg">

2. Этот способ на мой взгляд более практичный достаточно присвоить класс zoomi и установить размеры width и height меньше чем размер самой картинки.

Пример:

<img class="zoomi" src="/image.jpg" width="180"> 

По существу первый способ можно использовать для подмены одной картинки на другую. Как применять данный скрип решать Вам. Все зависит от Вашей фантазии.



Создан: 02.10.2012 07:38 | Отредактирован: 12.03.2015 06:39