Всем добрый день! =). Мы решили продемонстрировать что-то вроде небольшого виджета, который может быть использован, как последние статьи.

Основная идея состоит, чтобы показать фиксированный список в правой части экрана, с некоторыми картинками. Когда пользователь наводит курсор на картинки, то выскользнет заголовок и две ссылки, одна из них соответствует самой статье и 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);
		});
	}
});

Ну вот и все!

Надеемся, вам понравился урок, и вы его сочли полезным!