CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 293   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

0

Прокрутка списка ссылок jQuery

Jemand 13160 ,
JavaScript

1. CSS

#list {
	text-align: center;
	border: 1px solid #ccc;
	width: 90px;
	overflow: auto;
	height: 360px;
	position: relative;
	font-size: 14px;
	line-height: 1.4;
	font-family: Georgia, Helvetica, Arial, Sans-Serif;
	margin: 0 auto;
	border-radius: 5px;
	box-shadow: 0px 0px 15px #ccc;
	}
#list ul {
	list-style-type: none;
	}
#list li {
	margin-left: -40px;
	}
#list a {
	text-decoration: none;
	display: block;
	color: #000;
	}
#mover {
	position: absolute;
	width: 100%;
	padding-top: 0px;
	height: 360px;
	}
#list .hover {
	font-weight: bold;
	font-size: 18px;
	color: #FF8400;
	}

2. Подключение jQuery

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>

3. JavaScript

<script>
$(function() {
	$("#list").css("overflow", "hidden").wrapInner("<div id='mover' />");
		var $el,
		    speed = 9.2,
		    cur = -1,
		    items = $("#list a"),
		    max = items.length - 10;
		items
		.each(function(i) {
			$(this).attr("data-pos", i);
		})
	.hover(function() {
		$el = $(this);
		$el.addClass("hover");
		$("#mover").css("top", -($el.data("pos") * speed - 0));
		cur = $el.data("pos");
	}, function() {
		$(this).removeClass("hover");
	});
});
</script>

Всё вышеизложенное вставляем в раздел head, в том порядке, как указано.
4. HTML

<div id="list">
	<ul>
		<li><a href="#">А</a></li>
		<li><a href="#">Б</a></li>
		<li><a href="#">В</a></li>
		<li><a href="#">Г</a></li>
		<li><a href="#">Д</a></li>
		<li><a href="#">Е</a></li>
		<li><a href="#">Ё</a></li>
		<li><a href="#">Ж</a></li>
		<li><a href="#">З</a></li>
		<li><a href="#">И</a></li>
		<li><a href="#">Й</a></li>
		<li><a href="#">К</a></li>
		<li><a href="#">Л</a></li>
		<li><a href="#">М</a></li>
		<li><a href="#">Н</a></li>
		<li><a href="#">О</a></li>
		<li><a href="#">П</a></li>
		<li><a href="#">Р</a></li>
		<li><a href="#">С</a></li>
		<li><a href="#">Т</a></li>
		<li><a href="#">У</a></li>
		<li><a href="#">Ф</a></li>
		<li><a href="#">Х</a></li>
		<li><a href="#">Ц</a></li>
		<li><a href="#">Ч</a></li>
		<li><a href="#">Ш</a></li>
		<li><a href="#">Щ</a></li>
		<li><a href="#">Ъ</a></li>
		<li><a href="#">Ы</a></li>
		<li><a href="#">Ь</a></li>
		<li><a href="#">Э</a></li>
		<li><a href="#">Ю</a></li>
		<li><a href="#">Я</a></li>
	</ul>
</div>

Демо

Рекламная пауза

Оставить комментарий