Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 3.147.36.106
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Прокрутка ссылок в блоке
Сообщение оставлено 15.05.2011 в 12:42:23 | Сообщение #1

На этой основе можно сделать удобное меню для сайта. Благодаря этому скрипту можно значительно сократить высоту блока с категориями. Для сайта с объявлениями это будет полезно, ведь на таких сайта зачастую бывает больше ста категорий. Прокрутка ссылок в блоке сделает сайт более функциональным, приятным для использования. Прокрутка здесь плавная, в браузере Opera работает изумительно.

Для начала необходимо подключить JQuery. Ставим следующий код между тегами <head>.

Code
<script src='http://webo4ka.ru/Ucoz3/prokrutka_ccilok_v_bloke_jquery.min.js'></script>

Код CSS
Code
<style>
#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;
}
</style>

Код 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>

Код 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>


 Сообщение отредактировал QUE - Воскресенье, 15.05.2011, 12:42:57
 
Рерайт, копирайт, продажа стим аккаунтов.
Связь со мной Skype: axiles281 and ICQ: 609881443
 
   
Сообщение оставлено 16.05.2011 в 11:26:48 | Сообщение #2
кульно спасибо
 
 
   
Сообщение оставлено 16.05.2011 в 11:27:46 | Сообщение #3
Jelix,
Quote
5.Запрещается оставлять коментарии в роде как "спс" "кул" "зб" и тому подобное.
Наказание: Устное. Рецидив бан на 1 день.

Устное.

 
 
   
Сообщение оставлено 16.05.2011 в 12:14:31 | Сообщение #4
Скрипт мб и хороший ,но не нужный ,Но мб под рекламу только
 
Увидимся...
 
   
Сообщение оставлено 01.06.2011 в 12:28:16 | Сообщение #5
чисто для рекламы! а так нормуль!
 
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика