Всем добрый день! =). Мы решили продемонстрировать что-то вроде небольшого виджета, который может быть использован, как последние статьи.
Основная идея состоит, чтобы показать фиксированный список в правой части экрана, с некоторыми картинками. Когда пользователь наводит курсор на картинки, то выскользнет заголовок и две ссылки, одна из них соответствует самой статье и 1 для демонстрации.
Перед тем как использовать это нам конечно же, хочется поделиться ею с вами :) Demo, Исходники
Итак, начнем!
HTML структура будет состоят из списка с некоторыми вложенными элементоми в внутри.
<div id="rp_list" class="rp_list">
<ul>
<li>
<div>
<img src="images/1.jpg" alt=""/>
<span class="rp_title">Post Title</span>
<span class="rp_links">
<a target="_blank" href="#">Article</a>
<a target="_blank" href="#">Demo</a>
</span>
</div>
</li>
...
</ul>
<span id="rp_shuffle" class="rp_shuffle"></span>
</div>
В JavaScript мы определим, что мы показываем только 5 элементов одновременно.
Конечно, необходимо заменить # с вашей ссылки.
Давайте взглянем на css стили.
Мы начнем с общих характеристик стилей:
.rp_list {
font-family:Verdana, Helvetica, sans-serif;
position:fixed;
right:-220px;
top:40px;
margin:0;
padding:0;
}
Как видите, список будет иметь фиксированное положение,
всегда находится в том же месте, когда пользователь прокручивает страницу.
Мы собираемся установить в право на отрицательное значение, скрывая весь список.
Теперь определим стиль Shuffle:
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.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.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;
}
И это всё - со стилями закончили. Давайте добавим волшебство!
Основная идея заключается в первую очередь показать 5 пунктов слайда.
Это аккуратный эффект, и чтобы показать пользователю,
что сдесть что-то происходит, и что он может взаимодействовать с этим элементом нам нужно применить небольшое усилие =).
Mы пока сделаем это слайд, во всю ширину, обнажив названия и ссылки.
Как вы заметили, мы добавили все наши соответствующие элементы в структуре 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);
});
}
});
Ну вот и все!
Надеемся, вам понравился урок, и вы его сочли полезным!