|
|
|
|
Плавное увеличение изображения при помощи jQuery. Автор: Андрей Краснокутский Дата: 2012-07-09 Плавное увеличение картинки с помощью jQuery.Любой материал на сайте воспринимается гораздо лучше, если он снабжен графикой. Это могут быть различные фотографии, рисунки, чертежи и т.д. Но из-за нехватки свободного места на web-страницах далеко не всегда получается разместить полномасштабные графические изображения. И здесь нам на помощь придет скрипт из библиотеки jQuery, который позволяет увеличивать графические изображения. Пример работы скрипта Вы видите ниже:  При наведении курсора на картинку, она плавно трансформируется в размерах по ширине и высоте (увеличивается), а затем, когда убираем курсор, также плавно уменьшается до заданного значения. При этом содержание web-страницы не смещается и не деформируется, как это это было в одном из прошлых уроков, когда мы использовали для увеличения изображения JavaScript. Теперь давайте разбираться как практически реализовать подобный эффект. Скачайте Архив с исходниками скрипта. В архиве вы найдете: сокращенную версию библиотеки jQuery (файл jquery-1.6.2.min.js), файл таблицы стилей (kvn.css) и графическое изображение файл (kvn.jpg). По умолчанию и в Листингах (ниже) все эти файлы лежат в корневой папке сайта, но если Вы поместите файлы в другие места или папки, то обязательно правильно пропишите путь до этих файлов. Между тегами <head> и </head> прописываем код Листинга 1: Листинг 1.
Первой строкой кода мы подключаем к нашей web-странице таблицу стилей: файл kvn.css. Второй строкой кода мы подключаем к нашей web-странице библиотеку jquery.
Создаем файл таблицы стилей kvn.css и прописываем в нем код Листинга 2: Листинг 2.
Здесь цифровые значения: 200 и 145, определяют размер миниатюры (ширину и высоту). Эти значения можете изменить под нужные Вам размеры. Если у Вас на сайте уже есть таблица стилей, то код из Листинга 2 можно просто добавить в уже существующую таблицу стилей и не создавать отдельную таблицу стилей.
В том месте web-страницы, где Вы хотите вывести миниатюру картинки, прописываете код Листинга 3: Листинг 3.
Цифры: 550 и 400 указывают на реальные размеры графического файла-картинки (у меня данное изображение имеет размеры: 550х400 пикселей). У Вас могут быть свои значения. Цифры: 200 и 145 указывают на размеры миниатюры (у меня 200х145 пикселей). У Вас могут быть свои значения. Цифра 450 в коде влияет на скорость раскрытия картинки до полномасштабного размера и свертывания к миниатюре. Эту цифру Вы также можете изменить на свое усмотрение. В примере использован графический файл kvn.jpg, этот файл Вы конечно же замените на свою картинку. Вот собстевенно и все, теперь осталось только закачать все файлы, с которыми Вы работали на сервер. Всего Вам доброго.
Читайте так же: Как создать в Интернете свой Информационный Бизнес. Как создать эффект скругления углов изображения с помощью JavaScript. Почтовая Рассылка - Главный инструмент Интернет-Бизнесмена. Как сделать электронную книгу в EXE формате. Практическое руководство. Электронная платежная система: WebMoney. Практическое руководство.
Просмотров: 11969 Поделитесь этой информацией со своими друзьями! Комментарии к этой статье (уроку): Комментарии добавил(а): Ирина Андрей, спасибо за информацию. Вопрос: почему в уменьшенном виде фото выходит за край листа, когда курсор переводится на текст ниже? Комментарии добавил(а): Ахмад Андрей спасибо Вам! С уважением к Вам Ахмад. Мне очень понравился этот скрипт и думаю воспользуюсь этим скриптом. Мне понадобился скрипт аккардион на сайте http://jquery.com как сказано там я создал, а скачал совсем не то. Как создать скрипт аккардион? Ахмад. Комментарии добавил(а): Прохожий Глючить картинка при повороте указателя мыши влево - очень мелькает неприятно:) Комментарии добавил(а): Сергей Некорректное увеличение картинки...при возвращении в норму-рвет текст ниже. Смотрю в Опере Комментарии добавил(а): Александр Доброго времени суток Андрей! Как всегда Вы на высшем уровне! С уважением Александр. Комментарии добавил(а): Владимир Скрипт очень полезен миссионерским и паломническим сайтам для демонстрации соборов, церквей и монастырей вместе с их служителями, миссионерами и паломниками. Но нужен ещё урок попроще, для чайника, на пальцах. Например, как фотографию Храма Христа Спасителя из Интернета, вставить в выбранную страницу опубликованного сайта? Комментарии добавил(а): Alex Спасибо! Нужная вещь - увеличение картинки. Все доходчиво описано. С уважением, Erani Alex Комментарии добавил(а): Игорь Здравствуйте, Андрей! Я не совсем понял относительно листингов. Здесь бы, нам чайникам, попроще. Я скачал архив с исходниками и поместил его в корневую папку. А дальше что? Где эти листинги? Спасибо. Комментарии добавил(а): Андрей Листинг - это участок кода, какого либо скрипта или программы, который вставляется в код основной web-страницы. Комментарии добавил(а): Владимир Андрей, спасибо за Ваши уроки - очень познавательные и доступно. Пока вставлял на страницу по одной картинке или все картинки одного соотношения сторон, всё было прекрасно, но потребовалось на одной странице разместить картинки с разным соотношением сторон и все картинки и в миниатюрах и увеличенные получаются "по последней" хотя файл ".css" создаю для каждой отдельно с её параметрами и прописываю путь на тот файл что надо. Комментарии добавил(а): Буба А как быть, если ширина и высота картинок разная и названия файлов тоже могут быть разные, да еще и произвольные? Весь интернет перелопатил, ничего нет подобного, ни на javascript, ни на jquery Комментарии добавил(а): Иван отстойный пример, lightbox круче, использовал, результат паралитический и кривой Комментарии добавил(а): Антон Спасибо Добавить Ваш комментарий:
|
Новости сайта Почтовая рассылка Новинка! Как реально заработатьв Интернете? "Обзор видов и способов заработка."
Специальный Отчет:  В подарок всем подписчикам! Полный список наших почтовых рассылок! Домены 
Google Adsense |
Навигация
Видео Курсы
Последние заметки
Новости сайта
Архив 2016 год: 2015 год: 2014 год: 2013 год: 2012 год: 2011 год: 2010 год: 2009 год: 2008 год: Сайты друзей Наши ссылки
Если Вам понравился  Наши Аттестаты
|
|
Разрешается полное или частичное копирование материалов сайта с обязательным |