10:34
ОбновитьСмайлыУправление мини-чатом
Вы вошли как Гость | Группа "Гости" | RSS

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Скрипты для сайта Ucoz » Скрипты Ucoz » Вертикальный топ скроллинг материалов в виде изображений (Вертикальный топ скроллинг материалов в виде изображений)
Вертикальный топ скроллинг материалов в виде изображений
AmazonkaДата: Среда, 23.02.2011, 22:53 | Сообщение # 1
Майор
Группа: Администраторы
Сообщений: 37
[ ]
Offline

Вывод материалов в вертикальном скроллинге

ДЕМО

Приступим.
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. На странице где хотите видеть этот скрипт, нужно между <head></head>,добавить следующий код. если хотите использовать данный скроллинг в блоке, а то есть на каждой странице, то необходимо написать код в шапке сайта

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

Внимание! можно использовать 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

Ссылка на источник материала.

Форум » Скрипты для сайта Ucoz » Скрипты Ucoz » Вертикальный топ скроллинг материалов в виде изображений (Вертикальный топ скроллинг материалов в виде изображений)
  • Страница 1 из 1
  • 1
Поиск:

Сделать бесплатный сайт с uCoz

www.owi.3dn.ru © Все права защищены! 2010-2011 Сайт оптимизирован под разрешение экрана 1280х1024 и браузеры Mozila Firefox
Загрузка...