10 февраля 2016      341      0

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

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

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

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

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

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

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

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

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


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

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

.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;
}

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

#couch{ top:240px; left:75px;}

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

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

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


<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>

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

#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;
}

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

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

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

$('a').click(function() {
    this.blur();
}); 

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

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

$(".more a").click(function(){
    $("#infobox").animate({bottom: '233px' }, 300);
    $("#fade_bg").fadeIn();
    return false;
}); 

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

$(".more").hover(function(){
    $(this).stop().animate({width: '225px' }, 200).css({'z-index' : '10'});
    }, function () {
    $(this).stop().animate({width: '50px' }, 200).css({'z-index' : '1'});
});  

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

$("#couch a").click(function(){
    $("#couch_info").show();
});  

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

$("#fade_bg, .close").click(function(){
    $("#fade_bg").fadeOut();
    $("#infobox").animate({bottom: '-200px' }, 300, function() {
        $("#infobox > div").css("display", "none");
    });
    return false;
});

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

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

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