Всем привет. Сегодня мы делаем всплывающие Mootools подсказки.
Для этого нам потребуется несколько иконок, графические подсказки, и сама библиотека Mootools.
Вот demo, а вот ссылка на ресурсы для урока.
Начнём. Создадим .html файл и подключим Mootools.
<!--Подключаем библиотеку Mootools-->
<script src="mootools.js" type="text/javascript"></script>
Теперь создадим html разметку. Это будет выглядеть так:
<div id="siteWrap">
<!--Блок с подсказками. -->
<div id="bubbleWrap" style="visibility: hidden;">
<div class="bubble" id="buble_psd">
<img src="images/chat_256.png"/></div>
<div class="bubble" id="buble_center">
<img src="images/chat_256.png"/></div>
<div class="bubble" id="buble_audio">
<img src="images/chat_256.png"/></div>
</div>
<!--Блок с иконками.-->
<div id="pageWrap">
<div class="page" id="psdPage">
<a href="#">
<img src="images/page_twiter.png" /></a></div>
<div class="page" id="netPage">
<a href="#"><img
src="images/page_tec.png" /></a></div>
<div class="page" id="audioPage">
<a href="#"><img
src="images/page_net.png" /></a></div>
</div>
</div>
Теперь нам не помешало бы поработать с CSS.
<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
background: #1a1613 url(images/bg_tutBody.gif) repeat-x;
}
img
{
border: 0;
}
#siteWrap
{
margin: 287px auto 0 auto;
width: 642px;
height: 345px;
position: relative;
background: transparent url(images/bg_pageWrap.jpg)
no-repeat top left;
}
#pageWrap
{
position: absolute;
z-index: 5;
top: 138px;
left: 134px;<
}
#psdPage
{
margin-left:-5px;
margin-right: 40px;
float: left;
cursor: pointer;
}
#netPage
{
margin-right: 40px;
float: left;
cursor: pointer;
}
#audioPage
{
float: left;
cursor: pointer;
}
#bubbleWrap
{
position: absolute;
z-index: 10;
left: 158px;
top: 60px;
}
.bubble
{
position: absolute;
}
#buble_psd
{
margin-left:-20px;
}
#buble_audio
{
margin-left:265px;
}
#buble_center
{
margin-left:120px;
}
.clear
{
clear: both;
}
</style>
Ну и наконец давайте заставим двигаться нашу подсказку так как мы и задумывали.
<script type="text/javascript" charset="utf-8">\
window.addEvent('domready', function() {
//Создаём переменные (в этом случае два множества)
// - представление наших подсказок
на странице.
var myPages = $$('.page');
var myBubbles = $$('.bubble');
//Ставим подсказки на opacity к нулю,
//таким образом они скрыты первоначально
myBubbles.setStyle('opacity', 0);
$('bubbleWrap').setStyle('visibility','visible')
//Добавляем наши события к иконкам
myPages.each(function(el, i) {
el.set('morph', {link : 'cancel'});
//Двигаем подсказку вверх на -30px и
//постепенно делаем видимой opacity = 1
el.addEvents({
'mouseenter': function() {
myBubbles[i].morph({
'opacity' : 1,
'margin-top' : '-30px'
});
},
// Возвращаем всё на места. Как было изначально.
'mouseleave' : function() {
myBubbles[i].morph({
'opacity' : 0,
'margin-top' : 0
});
}
});
});
});
</script>
Вот и всё! Удачи.
Оценить статью:
Оценивая статью, Вы подсказываете нам насколько данная информация стала
полезной именно для Вас. Мы ожидаем, прежде всего, оценку доступности материала
для понимания и простоты его изложения. Дополнительные комментари, вопросы,
дополнения и замечания Вы можете указать на странице
От Вас
Частичное, или полное копирование материала данной
статьи возможно лишь при размещении ссылки на данную страницу.