Выезжающий поверх страницы блок сообщений при помощи CSS и jQuery
В этом уроке мы покажем, как создать полупрозрачный слой, который накрывает всю страницу, и блок сообщений, который может быть закрыт. Затем мы добавим библиотеку jQuery, которая заставит появляться накрывающий слой и выезжать из верхнего края страницы блок сообщений. Посмотрите демонстрацию работы по ссылке.
Демонстрация работы – Скачать исходный код
HTML
Нам нужно всего два элемента в нашем html-коде: блок для накрывающего слоя и блок для блока сообщений. В блоке сообщений будет ссылочный элемент для уменьшенного изображения закрывающей кнопки и текст. И вот что получается:
<div></div> <div> <a></a> <h2>Important message</h2> <p> Here comes a very important message for your user. Turn this window off by clicking the cross. </p> </
Так как мы будем ссылаться на эти два основных элемента позже в JavaScript, нам нужно дать им идентификаторы. Вы можете разместить блоки для накрывающего слоя и блока сообщений где Вам удобно, прямо в элементе
У накрывающего слоя есть тэг стиля display:none, так как мы хотим, чтобы изначально он был невидимым. Со свойством видимости блока сообщений мы разберемся в CSS.
Давайте добавим стилей.
CSS
Для накрывающего слоя мы просто используем повторяющееся прозрачное изображения. Мы также можем просто задать ему темный цвет фона и сделать его прозрачным с помощью свойств CSS, но здесь мы будем использовать изображение:
.overlay{
background:transparent url(images/overlay.png) repeat top left;
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:100;
}
Здесь мы растягиваем этот блок, задавая ему позицию 0 со всех сторон. Так что не важно, насколько широкое окно у браузера, эти свойства всегда растянут его на всю страницу. Использование свойства position:fixed
будет всегда держать блок на одном месте, вне зависимости от прокрутки страницы. Если бы мы использовали свойство position:absolute, наш блок накрывал бы только верхнюю видимую часть страницы, но не включал нижнюю часть страницы, видимую после прокрутки. Значение свойства z-index должно быть очень высоким, чтобы поместить этот элемент выше других элементов, кроме блока сообщений.У блока сообщений будут такие свойства CSS:
.box{
position:fixed;
top:-200px;
left:30%;
right:30%;
background-color:#fff;
color:#7F7F7F;
padding:20px;
border:2px solid #ccc;
-moz-border-radius: 20px;
-webkit-border-radius:20px;
-khtml-border-radius:20px;
-moz-box-shadow: 0 1px 5px #333;
-webkit-box-shadow: 0 1px 5px #333;
z-index:101;
}Мы снова задаем фиксированное положение блока, так как нам нужно, чтобы блок сдвигался, когда мы прокручиваем страницы. Мы устанавливаем отрицательное значение свойству top
Чтобы поместить элемент в центр страницы, мы просто задаем ему одинаковые расстояния справа и слева. Использование процентов позволяет хорошо адаптировать элемент ко всем размерам экрана, не забывайте, что они могут сильно отличаться.
Свойства CSS3 добавят скругления углам и тени блоку сообщений. Но они будут работать не во всех браузерах.
Значение свойства z-index должно быть больше, чем у накрывающего слоя. Так что мы просто добавим к нему единицу. Убедитесь, что у Вас нет элементов с абсолютным позиционированием с более высоким значением свойства z-index.
У закрывающего крестика блока сообщений будут такие стили:
a.boxclose{
float:right;
width:26px;
height:26px;
background:transparent url(images/cancel.png) repeat top left;
margin-top:-30px;
margin-right:-30px;
cursor:pointer;
} Этот маленький элемент должен наполовину высовываться из блока сообщений, и, так как у блока сообщений есть внутренний отступ 20 пикселей, мы вытолкнем элемент выше и правее, установив ему отрицательное значение внешнего отступа -30 пикселей для этих сторон. Отрицательные внешние отступы могут быть использованы разными способами, чтобы помочь Вам располагать элементы, не бойтесь их использовать, это хороший практический прием. Здесь вы можете прочесть очень полезную статью об этом, написанную Dan Cederholm.
У элементов с тегом h2 будут следующие свойства:
.box h2{
border-bottom: 1px dashed #7F7F7F;
margin:-20px -20px 0px -20px;
padding:10px;
background-color:#FFEFEF;
color:#EF7777;
-moz-border-radius:20px 20px 0px 0px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-khtml-border-top-left-radius: 20px;
-khtml-border-top-right-radius: 20px;
}
Мы снова устанавливаем здесь отрицательные внешние отступы, чтобы вытолкнуть элемент. Заметьте, что свойства CSS3 для браузера Mozilla могут быть записаны кратко.
Это все, что касается CSS, теперь давайте приступим к классному JavaScript.
JavaScript
Следующий код добавляется в конце файла html, прямо перед закрытием тега body:
$(function() {
$('#activator').click(function(){
$('#overlay').fadeIn('fast',function(){
$('#box').animate({'top':'160px'},500);
});
});
$('#boxclose').click(function(){
$('#box').animate({'top':'-200px'},500,function(){
$('#overlay').fadeOut('fast');
});
});
});Элемент #activator применяется к каждому элементу на странице, который должен вызвать накрывающий слой и появление блока сообщений. В примере мы просто добавили ссылочный элемент со стилями с таким идентификатором.
Когда на запускающий элемент нажимают, накрывающий слой должен появиться очень быстро, и после этого другая функция должна выполниться, заставляя блок сообщений выехать из верхнего края. Это то, что делает функция animate(). Дальше мы указываем, что значение свойства top должно быть 160 пикселей, что означает, что мы хотим, чтобы блок сообщений передвинулся с его текущего положения на положение top:160px, и что это должно занять 500 миллисекунд.
После того, как накрывающий слой и блок сообщений появились, мы хотим иметь возможность закрыть блок сообщений, нажимая на уменьшенное изображение крестика. Функция, которая это делает, сначала заставит блок сообщений уехать вверх на его старое положение top:-200px, а после этого заставит исчезнуть накрывающий слой.
Имейте ввиду, что начальное положение блока сообщений -200px зависит от высоты блока. Если Ваш блок сообщений длиннее, убедитесь, что значение его начального положения меньше, например, -500px, если Ваш блок сообщений 500px в высоту.
И это все! Попробуйте поэкспериментировать со скоростью появления элементов. Вы также можете заменить значение fast на любое значение в миллисекундах. И Вы можете сделать так, чтобы блок сообщений выезжал слева или справа, для этого Вам только нужно изменить начальные значения и значения в функциях JavaScript.
Наслаждайтесь!
Демонстрация работы – Скачать исходный код
Автор урока Mary Lou
Перевод — Дежурка
Смотрите также:
Создаем выезжающий блок меню с помощью jQuery и CSS3
В этом уроке мы создадим уникальный выезжающий блок навигации. Основная задача — сделать так, чтобы блок с пунктом меню сдвинулся вниз и в то же время уменьшенное изображение появилось сверху. Мы также добавим блок подменю с вложенными ссылками для некоторых пунктов меню. Подменю будет выезжать влево или вправо в зависимости от того, на какой пункт мы наведем указатель мыши.
Демо – Скачать исходный код
Мы будем использовать jQuery Easing Plugin и красивые фотографии от tibchris.
Разметка
Мы будем использовать ненумерованный список, где каждый пункт меню будет содержать элемент основной ссылки и блок элемента для подменю, в качестве HTML структуры:
<ul>
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span></span>
<span>
<span>Portfolio</span>
<span>My work</span>
</span>
</a>
<div>
<a href="#">Websites</a>
<a href="#">Illustrations</a>
<a href="#">Photography</a>
</div>
</li>
...
</ul>Если подменю нет, то блок может быть просто пропущен. Изображение не будет показано в начале, так как мы установим его высоту и ширину в 0 в таблице стилей.
Давайте рассмотрим стили.
CSS
Мы начнем с назначения стилей ненумерованному списку:
ul.sdt_menu{
margin:0;
padding:0;
list-style: none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:14px;
width:1020px;
}Мы в целом хотим отменить оформление текста и подчеркивание, применяемые по умолчанию, для всех элементов ссылок в нашем меню:
ul.sdt_menu a{
text-decoration:none;
outline:none;
}Наши элементы списка будут всплывать влево и будут иметь относительное позиционирование, так как мы хотим использовать абсолютное позиционирование для элементов внутри. Если мы не настроим так, то элементы с абсолютным позиционированием будут относительными для всей страницы:
ul.sdt_menu li{
float:left;
width:170px;
height:85px;
position:relative;
cursor:pointer;
}Стиль для главного элемента ссылки, в котором у нас есть два тега span для названия и описания, будет таким:
ul.sdt_menu li > a{
position:absolute;
top:0px;
left:0px;
width:170px;
height:85px;
z-index:12;
background:transparent url(../images/overlay.png) no-repeat bottom right;
-moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
}Обратите внимания на z-index: мы определим порядок наложения для всех важных элементов так, чтобы элементы справа оставались сверху.
Мы используем фоновое изображение, которое создает эффект стекла с полупрозрачным градиентом. Использование фонового узора, например, дерева, как в примере, создаст красивый эффект. Обязательно попробуйте разные текстуры, это выглядит изумительно!
Вы так же можете поиграть с тенями: меняя значения на 2px 2px 6px #000 inset, вы получите очень милый эффект.
Изображение будет иметь такие стили:
ul.sdt_menu li a img{
border:none;
position:absolute;
width:0px;
height:0px;
bottom:0px;
left:85px;
z-index:100;
-moz-box-shadow:0px 0px 4px #000;
-webkit-box-shadow:0px 0px 4px #000;
box-shadow:0px 0px 4px #000;
}Мы хотим анимировать изображение, чтобы оно поднималось снизу, поэтому мы позиционируем его абсолютно, используя низ как точку отсчета. И добавим изящные тени со всех сторон. Первые два значения — нули, это распределит тени равномерно вокруг изображения. Мы также используем это в элементе ссылки. Эта равномерная тень может быть использована, когда Вы хотите создать эффект светящейся рамки. Преимущество в том, что теней как бы нет, их не нужно принимать в расчет для вычисления ширины и высоты элементов. Неудобство на данный момент в том, что CSS3 не поддерживается в браузере Internet Explorer.
Родительский объект для тегов span названия и описания будет иметь такой стиль:
ul.sdt_menu li span.sdt_wrap{
position:absolute;
top:25px;
left:0px;
width:170px;
height:60px;
z-index:15;
}Если у Вас большие тексты, Вам нужно будет настроить эти значения. Также убедитесь, что настроенные значения хорошо подходят к значениям анимации в JavaScript.
После этого мы определим стиль для серого выезжающего блока. Мы установим значение его высоты в 0 и спозиционируем его таким образом, чтобы нам осталось только увеличить его высоту в анимации:
ul.sdt_menu li span.sdt_active{
position:absolute;
background:#111;
top:85px;
width:170px;
height:0px;
left:0px;
z-index:14;
-moz-box-shadow:0px 0px 4px #000 inset;
-webkit-box-shadow:0px 0px 4px #000 inset;
box-shadow:0px 0px 4px #000 inset;
}Общие стили для тегов span и ссылок в блоках будут такими:
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
margin-left:15px;
text-transform:uppercase;
text-shadow:1px 1px 1px #000;
}Название и описание будут иметь такой стиль:
ul.sdt_menu li span span.sdt_link{
color:#fff;
font-size:24px;
float:left;
clear:both;
}
ul.sdt_menu li span span.sdt_descr{
color:#0B75AF;
float:left;
clear:both;
width:155px;
font-size:10px;
letter-spacing:1px;
}Блок подменю будет изначально спрятан под серым блоком. Затем мы анимируем его движение вправо или влево в зависимости от того, где мы находимся. Если мы, например, наведем указатель мыши на последний элемент, мы хотим анимировать движение блока этого подменю влево, в остальных случаях мы хотим анимировать его движение вправо.
ul.sdt_menu li div.sdt_box{
display:block;
position:absolute;
width:170px;
overflow:hidden;
height:170px;
top:85px;
left:0px;
display:none;
background:#000;
}
ul.sdt_menu li div.sdt_box a{
float:left;
clear:both;
line-height:30px;
color:#0B75AF;
}
У первой ссылки в подменю должен быть внешний верхний отступ:
ul.sdt_menu li div.sdt_box a:first-child{
margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
color:#fff;
}И это все со стилями! Давайте добавим магию!
JavaScript
Когда мы наводим мышку на элемент списка, мы увеличиваем изображение и показываем оба тега span sdt_active и sdt_wrap. Если у элемента есть подменю sdt_box, мы выдвигаем его в сторону. Если элемент последний в меню, мы сдвигаем блок подменю влево, в остальных случаях вправо:
$(function() {
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'170px',
'height':'170px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'170px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '170px';
if($elem.parent().children().length == $elem.index()+1)
left = '-170px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');
$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});
});
И это все! Надеемся, Вам понравилось это маленькое меню, и оно Вам пригодится!
P.S. Это решение отлично выглядит в браузере Google Chrome!
Демо – Скачать исходный код
Автор урока Mary Lou
Перевод — Дежурка
Смотрите также:
Выезжающая панель сверху с помощью CSS
Лично я несколько раз использовал подобную методику. Благодаря использованию CSS, данный метод является не сложным и понятным. Пример того что получится можно посмотреть ниже.
Давайте потихоньку приступать к выполнению задуманного, тем более что работы не особо много, чтобы долго растягивать писанину. Первым делом добавим нашу HTML разметку. Разметка простенькая минимальная для того, что бы было понятно. Имеет два блока родительский и дочерний. По сути родительский это кнопка для наведения а дочерний сама панель на которой Вы будете размещать разного рода информацию.
<div> <span>Наведи на меня</span> <div> Место для любой информации, которую хотите разместить. </div> </div>
Чтобы запустить нашу анимацию выезжающей панели, добавляем стили. Сделать это нужно, например, в конце вашего файла стилей. Который размещен в папке с вашим сайтом. В зависимости от того, какая у вас система или самописный сайт, файл стилей может лежать в разных папках и называться по разному. Чаще всего он носит название — style.php.
#sl_tp{
position: fixed;
top:0;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
background: #f60;
width:100%;
height:40px;
box-shadow:0 0 5px #777;
text-align:center;
color:#fff;
}
#sl_in {
position: fixed;
min-height:200px;
top:-200px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
background: #313131;
width:100%;
padding:10px;
box-sizing:padding-box;
}
#sl_tp:hover {
top: 200px;
}
#sl_tp:hover #sl_in {
top:0;
}
Вот и вся панель. Стили меняем под себя, настраиваем и добавляем в дочерний блок в разметке свою информацию. В стилях можно настроить время появления. Оно задается параметром — transition. В данном примере время появления равно 0.3 секунды. Можете поменять под себя.
Также можете по желанию, поменять расположение панели и переместить ее вниз. Для этого нужно в коде со стилями, все параметры — top: заменить на bottom:. Писать тот же код с заменой парі параметров не буду. думаю Вы справитесь с этой задачей.
На этом все, спасибо за внимание. 🙂
Выдвижная боковая блок-панель на CSS
Это выдвижная панель, которая находится с левой стороны, где при наведении на кнопку она выезжает, а что в ней находится зависит от разработчика. Она полностью работает на чистом CSS, где можно самостоятельно скорректировать стиль для такого блока, но и безусловно задать скорость. Здесь был простой знак в виде стрелки, что не очень корректно смотрелся.Так как многие подключили шрифтовые иконки, то аналогично в коде красиво прописанная с загнутым углом стрелка, что стало совершенно по другому выглядеть. А так очень простои и удобный код, который может всегда понадобиться на сайте, ведь при открытии страницы этот блог по умолчанию идет закрытым.
Так идет по умолчанию, где фон создал темным, чтоб лучше каркас наблюдать.
Здесь навели курсор и полностью каркас выехал, и видим описание или то, что установите.
Приступаем к установке:
HTML
Код
<div> <i></i>
<div>
Пишем свое описание по тематике.
</div>
</div>
CSS
Код
#dagurdsa-nevailable {position: fixed;
top: 100px;
left: 0;
background: #0a650a;
width: 28px;
height: 27px;
font: 15px Arial;
color: #f5f0f0;
text-align: center;
padding: 11px 10px 0px 0px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
cursor:pointer;
}
#gechusudesab-sequiremen {
position: fixed;
top: 100px;
left: -220px;
background: #e4e4ea;
color: #1f1e1e;
width: 200px;
height: 173px;
padding: 8px;
text-align: left;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
#dagurdsa-nevailable:hover {
left: 215px;
}
#dagurdsa-nevailable:hover #gechusudesab-sequiremen {
left: 0;
}
Также есть идея в нем выставить информер или статистику сайта, но если ставить на главную, то нужно, что то существенное по информации поставить, так, чтоб пользователям и гостям сайта было нужно или интересно.
Демонстрация
Создание выезжающих блоков связанных сообщений с помощью jQuery и CSS3
Многие задаются вопросом, как показать посетителям больше своих работ. Обычно старые сообщения в блоге забываются, и даже если что-то все еще интересно и актуально, оно теряется в куче нового. Мы создадим небольшое приложение, которое может использоваться, чтобы показать связанные сообщения на каждой странице.
Основная задача – показать список, закрепленный с правой стороны экрана, с выглядывающими уменьшенными изображениями. Когда пользователь наводит указатель мыши на элементы, они выезжают, показывая название и две ссылки: одну для самой связанной статьи и вторую для примера. У нас дополнительно будет кнопка перемешивания под списком. После нажатия, сообщения в списке обновляются случайным образом.
Демо – Скачать исходный код
Итак, начнем!
Разметка
Структура HTML будет списком с вложенными элементами: главным блоком с уменьшенными изображениями, тэгом span для названия и тэгом span с двумя ссылками:
<div>
<ul>
<li>
<div>
<img src="images/1.jpg" alt=""/>
<span>Post Title</span>
<span>
<a target="_blank" href="#">Article</a>
<a target="_blank" href="#">Demo</a>
</span>
</div>
</li>
...
</ul>
<span></span>
</div>Все связанные сообщения будут внесены в список в структуре. В JavaScript мы определим, что только 5 сообщений будут показываться одновременно. Конечно, Вам нужно заменить # Вашими ссылками. Перемешивающий тэг span будет расположен после списка.
Давайте рассмотрим стили.
CSS
Мы начнем с общих свойств стиля:
.rp_list {
font-family:Verdana, Helvetica, sans-serif;
position:fixed;
right:-220px;
top:40px;
margin:0;
padding:0;
}Как Вы можете видеть, положение списка закреплено и всегда находится в одном и том же месте, когда пользователь прокручивает страницу. Мы сделаем значение положения отступа от правого края экрана отрицательным, в результате чего список будет спрятан.
После этого мы определим стиль перемешивающего тэга span:
span.rp_shuffle{
background:#222 url(../images/shuffle.png) no-repeat 10px 50%;
width:28px;
height:14px;
display:block;
margin:10px 0px 0px 20px;
cursor:pointer;
padding:4px;
border:1px solid #000;
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}У списка будет следующий стиль:
.rp_list ul{
margin:0;
padding:0;
list-style:none;
}Элементы списка изначально не будут показаны:
.rp_list ul li{
width: 240px;
margin-bottom:5px;
display:none;У главных элементов будет следующий стиль:
.rp_list ul li div{
display: block;
line-height:15px;
width: 240px;
height: 80px;
background:#333;
border:1px solid #000;
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}Уменьшенное изображение будет иметь размер 70 на 70 пикселей, и мы добавим к нему тень:
.rp_list ul li div img{
width:70px;
border:none;
float:left;
margin:4px 10px 0px 4px;
border:1px solid #111;
-moz-box-shadow:1px 1px 3px #000;
-webkit-box-shadow:1px 1px 3px #000;
box-shadow:1px 1px 3px #000;
}У тэга span для названия будет внутренняя тень:
span.rp_title{
font-size:11px;
color:#ddd;
height:46px;
margin:4px 0px 0px 20px;
display:block;
text-shadow:1px 1px 1px #000;
padding-top:3px;
background:#222;
-moz-box-shadow:0px 0px 5px #000 inset;
-webkit-box-shadow:0px 0px 5px #000 inset;
box-shadow:0px 0px 5px #000 inset;
}У тэга span для ссылок будет следующий стиль:
span.rp_links{
width:195px;
height:8px;
padding-top:2px;
display:block;
margin-left:42px;
}
span.rp_links a{
background: #222 url(../images/bgbutton.png) repeat-x;
padding: 2px 18px;
font-size:10px;
color: #fff;
text-decoration: none;
line-height: 1;
-moz-box-shadow: 0 1px 3px #000;
-webkit-box-shadow: 0 1px 3px #000;
box-shadow:0 1px 3px #000;
text-shadow: 0 -1px 1px #222;
cursor: pointer;
outline:none;
}
span.rp_links a:hover{
background-color:#000;
color:#fff;
}И это все со стилями! Давайте добавим немного магии!
JavaScript
Основная задача – сначала показать 5 элементов полностью и затем быстро задвинуть их так, чтобы были видны только уменьшенные изображения. Это должно происходить, когда страница загружается. Это изящный способ показать пользователю, что что-то происходит, и он может взаимодействовать с этим элементом.
Когда мы наводим указатель мыши на элемент, мы заставим его выезжать до тех пор, пока он не будет виден полностью, показывая название и ссылки.
Функция перемешивания заставит появиться 5 случайных сообщений. Как Вы заметили, мы добавили все наши связанные сообщения в структуру html, и мы будем выбирать 5 из этих сообщений случайным образом. Этот метод не гарантирует нам, что следующий показываемый набор элементов не будет повторять предыдущий, но это простое решение.
Мы добавим следующие функции jQuery:
$(function() {
/** * Список сообщений */
var $list = $('#rp_list ul');
/** * Количество связанных сообщений */
var elems_cnt = $list.children().length;
/** * Показать первый набор сообщений. * 200 – это изначальное значение левого внешнего отступа для списка элементов */
load(200);
function load(initial){
$list.find('li').hide().andSelf().find('div').css('margin-left',-initial+'px');
var loaded = 0;
//Показать 5 случайных сообщений из всего списка.
//Убеждаемся в неповторяемости.
while(loaded < 5){
var r = Math.floor(Math.random()*elems_cnt);
var $elem = $list.find('li:nth-child('+ (r+1) +')');
if($elem.is(':visible'))
continue;
else
$elem.show();
++loaded;
}
//Анимировать их.
var d = 200;
$list.find('li:visible div').each(function(){
$(this).stop().animate({
'marginLeft':'-50px'
},d += 100);
});
}
/** * Наведение указателя мыши на элементы списка заставит их выехать. */
$list.find('li:visible').live('mouseenter',function () {
$(this).find('div').stop().animate({
'marginLeft':'-220px'
},200);
}).live('mouseleave',function () {
$(this).find('div').stop().animate({
'marginLeft':'-50px'
},200);
});
/** * Показать 5 случайных сообщений после нажатия на кнопку перемешивания */
$('#rp_shuffle').unbind('click')
.bind('click',shuffle)
.stop()
.animate({'margin-left':'-18px'},700);
function shuffle(){
$list.find('li:visible div').stop().animate({
'marginLeft':'60px'
},200,function(){
load(-60);
});
}
});И это все! Надеемся, Вам понравился этот урок, и он Вам пригодится!
Демо – Скачать исходный код
Автор урока Mary Lou
Перевод — Дежурка
Смотрите также:
Выдвигающаяся панель при наведении с любой стороны с помощью CSS
Перед тем как показать, как сделать панель, покажу Вам сразу готовый результат, чтобы было понятно, что мы тут делаем.
Делается такая панель в два шага. Все что нужно это добавить HTML и CSS код. Делаем сначала разметку. Состоит она из родительского блока и вложенного в него дочернего.
<div>
Наведи на меня
<div>
Сюда код формы или другой информации, которую хотите разместить.
</div>
</div>
В итоге родительский блок служит контейнером и в нем располагается сама кнопка на которую нужно наводить для открытия и блок в который добавляем нужную нам информацию. По своей сути родительский блок и является кнопкой.
Далее просто добавляем стили в свой файл стилей. Например он может называться style.css и лежать в папке с вашим сайтом или темой сайта.
#slide_lft{
position: fixed;
top: 100px;
left: 0;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
background: #f60;
color:#fff;
padding:5px;
}
#slide_in {
position: fixed;
min-height:200px;
top: 100px;
left: -250px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
box-shadow:0 0 5px #777;
background: #f60;
color:#fff;
width:250px;
padding:10px;
box-sizing:padding-box;
}
#slide_lft:hover {
left: 250px;
}
#slide_lft:hover #slide_in {
left: 0;
}
С данными стилями панель будет размещаться слева. Если Вам нужно разместить ее справа, то все свойства — left: заменить на right:. Готовый код будет выглядеть так:
#slide_lft{
position: fixed;
top: 100px;
right: 0;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
background: #f60;
color:#fff;
padding:5px;
}
#slide_in {
position: fixed;
min-height:200px;
top: 100px;
right: -250px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
box-shadow:0 0 5px #777;
background: #f60;
color:#fff;
width:250px;
padding:10px;
box-sizing:padding-box;
}
#slide_lft:hover {
right: 250px;
}
#slide_lft:hover #slide_in {
right: 0;
}
Также смотрите на остальные параметры, если решите менять ширину блока для информации, то нужно и менять значение left: или right:, в зависимости что там у Вас. В данном случаи у нас задано везде 250 пикселей.
Время выдвигания задано кроссбраузерным параметром transition и равно 0.3 секунды. Можете поменять на свое в зависимости от нужд.
Вот и вся панель, согласитесь, кода намного меньше чем в первом варианте, да и попроще все в разы.
На этом все, спасибо за внимание. 🙂
8 выезжающих панелей для сайта на jquery и CSS
1. Плагин jQuery «Floater»
Плавающий блок на jQuery. Для просмотра эффекта необходимо прокрутить демонстрационную страницу вниз, при этом блок всегда будет оставаться в поле зрения посетителя. Плавающий блок можно фиксировать в любом подходящем месте на странице.
2. jQuery плагин «Slick»
Плагин для формирования выезжающих блоков на странице. Эти блоки можно раскрывать и скрывать нажатием на ссылку и они могут содержать в себе любую статическую информацию. Идеально подойдет для создания дополнительной навигации или формы обратной связи выезжающей на странице. Возможен вывод нескольких выезжающих блоков на одной странице, при этом их расположение вы можете задать как угодно.
3. Всплывющая анимированная jQuery UI панель
jQuery панель с содержимым, которая всплывает в заданном положении прокрутки. Плагин можно использовать для реализации контейнера с похожими статьями или товарами. Чтобы просмотреть все доступные похожие блоки на одной странице необходимо нажать на пиктограмму со стрелкой в верхнем правом углу jQuery панели. Для просмотра плагина в действии на демонстрационной странице прокрутите колесо мыши до упора вниз.
4. Всплывающая jQuery CSS3 панель
На демонстрационной странице нажмите на кнопку «infos» слева.
5. Выпадающие jQuery панели
jQuery панели, выпадающие с различных сторон экрана.
6. Выезжающая Mootools панель
Выпадающая сверху экрана Mootools панель.
7. Всплывающий блок
Сообщение появится при прокрутке страницы. Отличный плагин для привлечения внимания посетителя к какой-нибудь информации.
8. Выплывающий блок при прокрутке страницы
При прокрутке страницы внизу экрана выезжает блок с информацией, который можно закрыть, нажав на крестик. Для просмотра эффекта прокрутите вниз демонстрационную страницу.
Подготовлено по материалам