На этой основе можно сделать удобное меню для сайта. Благодаря этому скрипту можно значительно сократить высоту блока с категориями. Для сайта с объявлениями это будет полезно, ведь на таких сайта зачастую бывает больше ста категорий. Прокрутка ссылок в блоке сделает сайт более функциональным, приятным для использования. Прокрутка здесь плавная, в браузере Opera работает изумительно.
Для начала необходимо подключить JQuery. Ставим следующий код между тегами < head >.
Code
<script src='http://ucozua.ru/Scripts/24/prokrutka_ccilok_v_bloke_jquery.min.js'></script>
Код CSS
Code
#list {
text-align: center;
border: 1px solid #ccc;
width: 200px;
overflow: auto;
height: 100px;
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: 200px;
}
#list .hover {
font-weight: bold;
font-size: 18px;
color: red;
}
Код JavaScript в хеад
Code
<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>
$(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>
Код HTML
Code
<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="#">webo4ka</a></li>
</ul>
</div>
<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="#">webo4ka</a></li>
</ul>
</div>
Теги:
Проверить тиц
Витрина ссылок
