Первым делом хочу Вас всех поздравить с наступившими майскими праздниками и пожелать отличного весеннего настроения, а также прекрасно провести время с родными и близкими! Ну, а сегодняшний материал, я решил посветить одной теме про увеличение картинки при наведении курсора мышки, которая в принципе очень простая и ничего сложного в ней нет, кто имеет начальную базу знаний на JQuery. Похожий пример, можно также посмотреть в уроке изменение прозрачности JQuery, но там происходит лишь смена прозрачности, а не увеличение картинки при наведении.
Данный скрипт, может Вам пригодиться в различных ситуациях, ну к примеру к плавному увеличению фотографий и возвращению к исходному положению или при плавном увеличении ссылки, а может и в другой какой-то ситуации. В общем, все зависит от Ваших идей и конкретных задач.
Первая часть. HTML.
Подключаем необходимые нам файлы, это будут стандартные стили css, а также js-файлы, которые нужны для работы скрипта.
<link type="text/css" rel="stylesheet" href="css/demo.css"> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/img.js"></script>
Теперь пропишем ссылку и обязательно дадим ей класс url, с помощью которого наша картинка будет увеличиваться.
Между тегами a, мы прописываем тег img и указываем путь к нашей картинке.
<a href="#" class="url"><img src="img/1.jpg"></a>
Создаем папку img, в которой будем хранить наши картинки, в данном случае, там у меня лежит только одна картинка.
Вторая часть. JQUERY.
Переходим к самой основной части нашего скрипта. Создаем функцию, которая обращается к ссылке и классу url, сначала при наведении (hover) на картинку и с помощью обращения к классу url, придаем нашему изображению анимацию (animate), в последствии чего картинка увеличивается. Функция animate предназначена для плавного изменения CSS свойств у элементов. При отведении курсора мышки от картинки, она возвращается в исходное положение, так как CSS свойства, для данного примера, заданы по высоте и ширине, равным свойствам, исходного начального положения картинке.
$(document).ready(function(){
$("a.url").hover(function() {
$("a.url img").animate({width:"150px", height:"150px"}, 700);
},
function(){
$(".url img").animate({width:"100px", height:"100px"}, 1400);
}
);
});
Третья часть. CSS.
Ну и немного добавим стилей css, только лишь для красоты. Сделаем картинку круглой и придадим ей рамку, а также определенные отступы для данного примера.
img{
border-radius: 100%;
border: 1px solid #000000;
margin-top: 10px;
margin-left: 50px;
}
Кстати, имеется еще один похожий пример, - увеличение картинки на JavaScript и CSS, но там необходимо не наводить на картинку, а нажимать на нее, но принцип действий аналогичен данному примеру. Огромное спасибо всем за внимание и отличных Вам выходных!