• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Прокручиваем список ссылок на jQuery (скрипт)
Прокручиваем список ссылок на jQuery
workman
Понедельник, 04 Апреля 2016 | Сообщение 1
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Здесь работа скрипта заключается в том, что идут знаки в горизонтальном положение, что можно установить в любую сторону. И там буквы идут, при нажатие меняют оттенок и свой размер, нажимая на них, выводит посты с названием, где она заглавная.



Код
<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 (13.9 Kb)
Страна: (RU)
Сафрон
Понедельник, 04 Апреля 2016 | Сообщение 2
Оффлайн
Vip
Сообщений:224
Награды: 1
Но это лучше, чем сразу в дизайн в шапку вписывают буквы. +
Страна: (RU)
Tergran
Понедельник, 04 Апреля 2016 | Сообщение 3
Оффлайн
Пользователи
Сообщений:101
Награды: 0
Мне кажется, если судит по себе, мало кто так ищет на сайте, а пользуются поиском.
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Прокручиваем список ссылок на jQuery (скрипт)
  • Страница 1 из 1
  • 1
Поиск: