10 февраля 2016      3299      0

Создание интерактивного изображения с помощью JQuery

Урок будет полезен новичкам для понимания способов позиционирования элементов.

Подготовка холста

Прежде, чем мы сделаем кнопки с подсказками, мы должны подготовить место для их размещения. Создадим <div> #picture, который станет нашим холстом.

Стили этого холста

[code]#picture{
position:relative;
top:20px;
width:700px;
height:466px;
margin:0px auto;
background:#FFF url(‘office.jpg’);
overflow:hidden;
}[/code]

position:relative нам понадобится для того, чтобы все вложенные блоки с position:absolute вели отсчёт позиционирования не от угла окна браузера, а от угла нашего холста.

Добавление плюсов

Добавим один плюс на этот холст.
Структура его html кода будет следующей:

[php]

<div class="more" id="couch"> <!— id — имя этого плюса —>
<a href="#"><img src="more.png"></a><!— сам плюс —>
<span>IKEA Klippan Couch</span> <!— подпись к кнопке —>
</div>

[/php]

А стили будут такие:

[code].more{
position:absolute;
width:50px;
height:50px;
background:url(‘dim.png’);
border:1px solid #444;
padding:5px;
text-align:left;
overflow:hidden;
}
.more span{
position:absolute;
left:60px;
width:160px;
padding:15px 0 0 5px;
color:#FFF;
font:bold 13px Lucida Grande, Arial, sans-serif;
text-shadow:#000 1px 1px 0px;
}[/code]

Мы описали стили, общие для всех кнопок. Теперь надо через них задать координаты каждой отдельной кнопки.

[code]#couch{ top:240px; left:75px;}[/code]

Подобным образом задайте координаты для каждой из кнопок.

Добавление всплывающего блока

Теперь добавим всплывающий блок, который будет появляться при клике по одному из плюсов.

[php]

<div id="infobox">
<span class="close"><a href="#"><img src="close.png"></a></span> <!— значок закрытия окна —>

<div id="couch_info">
<img src="klippan.jpg">

<a href="http://www.ikea.com/us/en/catalog/products/10138530">IKEA Klippan Couch</a>
</div>

</div>

<!— серый фон —>

<div id="fade_bg"> </div>

[/php]

И оставшиеся стили

[code]#infobox{
position:absolute;
bottom:-200px;
left:350px;
height:200px;
width:300px;
z-index:20;
margin:0 0 -100px -150px;
background:#FFF;
border-radius:5px;
}
#infobox a, #infobox a:visited{
font:italic 16px Georgia, serif;
color:#555;
text-decoration:none;
}
#infobox a:hover{
text-decoration:underline;
}
span.close{
position:absolute;
right:5px;
top:5px;
}
#fade_bg{
position:absolute;
z-index:15;
width:100%;
height:100%;
background:url(‘dim.png’);
display:none;
}[/code]

Оживление макета

Мы добавили и всплывающее окошко, и затемняющий фон. Но изначально, согласно заданным стилям, они спрятаны от наших глаз. пришло время оживить картинку с помощью jQuery.

Во многих браузерах, когда мы кликаем по картинке-ссылке, вокруг неё появляется пунктирное выделение. Иногда от него можно избавиться с помощью css outline:none, но этот способ не является панацеей. Поэтому постараемся убрать выделение с помощью JQuery:

[code lang=»js»]$(‘a’).click(function() {
this.blur();
}); [/code]

Этот код снимает фокусировку с ссылки сразу после того, как мы по ней кликнули.

Теперь добавим код, заставляющий блок с информацией всплывать после клика по одной из кнопок

[code lang=»js»]$(".more a").click(function(){
$("#infobox").animate({bottom: ‘233px’ }, 300);
$("#fade_bg").fadeIn();
return false;
}); [/code]

Кнопка в виде плюса должна растянуться и показать скрытый текст, когда мы наводим для неё курсор. В следующем коде задайте точную ширину, до которой она будет расширяться или сужаться. Так же временно добавляем z-index, чтобы предотвратить дублирование кнопки.

[code lang=»js»]$(".more").hover(function(){
$(this).stop().animate({width: ‘225px’ }, 200).css({‘z-index’ : ’10’});
}, function () {
$(this).stop().animate({width: ’50px’ }, 200).css({‘z-index’ : ‘1’});
}); [/code]

Следующий скрипт делает видимым содержимое всплывающего окна. Код необходимо продублировать для каждой кнопки, меняя имена блоков.

[code lang=»js»]$("#couch a").click(function(){
$("#couch_info").show();
}); [/code]

Фон и описание предмета должны стать невидимыми при клике по затемнённому фону или кнопке закрытия окна, а окно информации должно спрятаться вниз. Это реализует код ниже:

[code lang=»js»]$("#fade_bg, .close").click(function(){
$("#fade_bg").fadeOut();
$("#infobox").animate({bottom: ‘-200px’ }, 300, function() {
$("#infobox > div").css("display", "none");
});
return false;
});[/code]

Вот и всё. склеив всё в единую страницу, вы получите конечный результат!



Все темы на сайте

© 2019 BorPost · Копирование материалов сайта без разрешения запрещено