Блог
Главная » Каталог файлов » Вертикальный топ скроллинг материалов в виде изображений для ucoz by mistermo
19:56

Вывод материалов в вертикальном скроллинге
Для начала посмотрите ДЕМО
Приступим.
1. Главная » Управление дизайном » Таблица стилей (CSS)
в CSS пишем:
Code
    body {    background: #ffffff; /*это цвет фона*/    padding: 0px 0 0 0px;   }   div.sc_menu_wrapper {    position: relative;    height: 234px; /*высота панели*/       margin-top: 5px;    overflow: auto;   width: 156px; (ширина панели*/    -webkit-border-radius: 4px; /*это */    -moz-border-radius: 4px; /*и это - округления краёв*/      text-align: center;    color: #ffffff;    border: 1px solid rgb(79, 79, 79);    background: #ffffff;   }   div.sc_menu {    padding: 15px 0;   }   .sc_menu a {    display: block;    margin-bottom: 5px;    width: 150px;       border: 3px rgb(79, 79, 79) solid;    -webkit-border-radius: 4px;    -moz-border-radius: 4px; /*обводка округлённых краев*/       color: #fff;    background: rgb(79, 79, 79);   }   .sc_menu a:hover {    border-color: rgb(130, 130, 130);    border-style: dotted;   }   .sc_menu img {    display: block;    border: none;   }      .sc_menu_wrapper .loading {    position: absolute;    top: 10px;    left: 0px;       margin: 0 auto;    padding: 10px;       width: 150px;    -webkit-border-radius: 4px;    -moz-border-radius: 4px;       text-align: center;    color: #fff;    border: 1px solid rgb(79, 79, 79);    background: #1F1D1D; /*цвет обводки*/   }     #back {    margin-left: 10px;    color: gray;    font-size: 18px;    text-decoration: none;   }   #back:hover {    text-decoration: underline;   }   


2. На странице где хотите видеть этот скрипт, нужно между ,добавить следующий код. если хотите использовать данный скроллинг в блоке, а то есть на каждой странице, то необходимо написать код в шапке сайта

Главная » Управление дизайном » Верхняя часть сайта:

Внимание! можно использовать css, который лежит в архиве, чтобы не прописывать всё выше описанное, а просто указать на него ссылку.
Code
  <script src="/css/scroll.css" rel="StyleSheet" type="text/css"></script>  

Сразу под ним же >>
Code
    <script src="/js/jquery.min.js" type="text/javascript"></script>   <script type= "text/javascript">/*<![CDATA[*/      function makeScrollable(wrapper, scrollable){    var wrapper = $(wrapper), scrollable = $(scrollable);       scrollable.hide();    var loading = $('<div class="loading">Загрузка...</div>').appendTo(wrapper);       var interval = setInterval(function(){    var images = scrollable.find('img');    var completed = 0;       images.each(function(){    if (this.complete) completed++;    });       if (completed == images.length){    clearInterval(interval);    setTimeout(function(){       loading.hide();    wrapper.css({overflow: 'hidden'});       scrollable.slideDown('slow', function(){    enable();    });    }, 1000);    }    }, 100);       function enable(){    var inactiveMargin = 100;    var wrapperWidth = wrapper.width();    var wrapperHeight = wrapper.height();    var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;      wrapper.mousemove(function(e){    var wrapperOffset = wrapper.offset();    var top = (e.pageY - wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;       if (top < 0){    top = 0;    }       wrapper.scrollTop(top);    });    }   }      $(function(){    makeScrollable("div.sc_menu_wrapper", "div.sc_menu");   });   /*]]>*/</script>   


3. Туда где хотим видеть сам скрипт ставим вот это:
Code
    <div align="center"><div class="sc_menu_wrapper">    <div class="sc_menu">   $MYINF_2$ /*Номер вашего иформера*/    </div>    </div></div>   


4. Последний шаг, создание информера. Главная » Информеры » Создать информер:
Раздел: Каталог файлов
Тип данных: Материалы
Способ сортировки: (в данном случае) Рейтинг материала A
Количество материалов: 10 (Количество выводимых в информере материалов.)
Количество колонок: 1

Категория: Каталог файлов

Вы не авторизованы, по-этому вы не можете скачивать файлы к материалу, просматривать демо, читать и оставлять комментарии!

Knu.com
  • Опросик
  • Зайдете ли вы к нам еще?