Эффект увеличения изображения на jQuery
В данной теме мы хотим поделиться небольшим скриптом с использованием библиотеки jQuery, который поможет Вам реализовать на своем сайте эффект увеличения изображений и добавления к ним подписей при наведении на них курсора мышки.
Ниже мы разместили два изображения, наведя на которые курсор мышки Вы сможете увидеть, о каком эффекте увеличения изображения идет речь.
Для работы данного скрипта Вам понадобится подключить на Вашем сайте библиотеку jQuery, если данная библиотека не была подключена ранее. Подключать ее следует следующим образом:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>Также Вам понадобится прописать все необходимые стили для изображений и появляющихся к ним подсказок. Стили выглядят следующим образом:
<style type="text/css">
.object {
width: 300px;
height: 125px;
border: 3px solid #336699;
margin: 10px;
overflow: hidden;
position: relative;
float: left;
}
.object img {
border: 0;
position: absolute;
width: 300px;
height: 125px;
}
.hint {
width: 300px;
height: 25px;
left: 0;
bottom: 0;
margin: 0;
padding: 5px;
font-size: 16px;
color: #EEEEEE;
background: #333333;
position: absolute;
display: none;
opacity: 0.9;
}
</style>Далее необходимо добавить скрипт, который будет выполнять всю работу по увеличению и уменьшению указанных изображений, а также по добавлению и скрытию подсказок к ним:
<script type="text/javascript">
$(document).ready(function() {
var scale = 1.2;
$('.object').hover(function() {
width_scale = $(this).width() * scale;
height_scale = $(this).height() * scale;
shift_left = ($(this).width() - width_scale)/2;
shift_top = ($(this).height() - height_scale)/2;
$(this).find('img').stop(false,true).animate({'width':width_scale,
'height':height_scale, 'top':shift_top, 'left':shift_left}, {duration:333});
$(this).find('div.hint').stop(false,true).fadeIn(333);
},
function() {
$(this).find('img').stop(false,true).animate({'width':$(this).width(),
'height':$(this).height(), 'top':'0', 'left':'0'}, {duration:333});
$(this).find('div.hint').stop(false,true).fadeOut(333);
});
});
</script>Сами же изображения, которые будут увеличиваться при наведении мышки, и подписи к ним необходимо описывать следующим образом:
<div class="object"><img src="image/img_1.png" alt="">
<div class="hint">Появляющаяся подпись № 1</div>
</div>
<div class="object"><img src="image/img_2.png" alt="">
<div class="hint">Появляющаяся подпись № 2</div>
</div>В результате у Вас должен получиться точно такой же эффект увеличения изображения с добавлением подписей, как и в примере, показанном выше на данной страничке.
Предлагаемый скрипт будет полезен для проектов, на страничках которых содержится много уменьшенных графических элементов, которые при наведении курсора мышки на них будут принимать увеличенный вид.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.