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>
Всё вышеизложенное вставляем в раздел
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>
