Страница 1 из 11
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Прокручиваем список ссылок на jQuery (скрипт)
Прокручиваем список ссылок на jQuery
workman
Дата: Понедельник, 04.04.2016, 10:05 | Сообщение # 1
Vip
Сообщений:1576
Награды: 7


Здесь работа скрипта заключается в том, что идут знаки в горизонтальном положение, что можно установить в любую сторону. И там буквы идут, при нажатие меняют оттенок и свой размер, нажимая на них, выводит посты с названием, где она заглавная.



Код
<div id="listGde31Ru">
  <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>

JS
Код
<script>/*<![CDATA[*/$(function(){$("#listGde31Ru").css("overflow","hidden").wrapInner("<div id='mover' />");var c,d=9.2,e=-1,b=$("#listGde31Ru a"),a=b.length-10;b.each(function(f){$(this).attr("data-pos",f)}).hover(function(){c=$(this);c.addClass("hover");$("#mover").css("top",-(c.data("pos")*d-0));e=c.data("pos")},function(){$(this).removeClass("hover")})});/*]]>*/</script>

CSS
Код
#listGde31Ru{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:0 0 15px #CCC}
#listGde31Ru ul{list-style-type:none}
#listGde31Ru li{margin-left:-40px}
#listGde31Ru a{text-decoration:none;display:block;color:#000}
#mover{position:absolute;width:100%;padding-top:0;height:360px}
#listGde31Ru .hover{font-weight:bold;font-size:18px;color:#FF8400}


DEMO Наведите курсор на форму и просто подвигайте туда сюда ))
Прикрепления: 8895279.png(14Kb)


Каждый раз, когда ты можешь помочь кому-то, просто сделай это и радуйся тому, что Бог отвечает на чьи-то молитвы через тебя...
Сафрон
Дата: Понедельник, 04.04.2016, 16:53 | Сообщение # 2
Пользователи
Сообщений:160
Награды: 0


Но это лучше, чем сразу в дизайн в шапку вписывают буквы. +
Tergran
Дата: Понедельник, 04.04.2016, 17:05 | Сообщение # 3
Пользователи
Сообщений:83
Награды: 0


Мне кажется, если судит по себе, мало кто так ищет на сайте, а пользуются поиском.
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Прокручиваем список ссылок на jQuery (скрипт)
Страница 1 из 11
Поиск: