Изменение свойств CSS "на лету"

У меня есть это вертикальное слайд-шоу, которое можно перемещать стрелами вверх/вниз. там 7 элементов (div) внутри контейнера div слайд-шоу, но только 3 из них видны за раз. По правде говоря, это слайд-шоу - это меню - из трех видимых элементов, один из которых посередине - один клик, который будет загружать контент в div где-то еще на странице.

Теперь, поскольку есть 3 элемента, и только 2-й элемент (средний) доступен для кликов, мне нужно создать разницу между ними. Итак, я подумал об изменении элементов border/border-radius следующим образом:

Проблема в том, что я не знаю, как это сделать, поскольку divs постоянно меняются местами в видимой области. Мне действительно нужна помощь здесь.

Разметка HTML:

<div id="rocksType_btns">
    <div id="rocksType_btnUp"></div>
    <div id="rocksType_btnDown"></div>
</div>

<div id="rocksType_subtypeSlider">
    <div id="rocksType_DBitems_container">
        <div id="rocksType_DB_1" class="rocksType_DBitem">Item 1</div>
        <div id="rocksType_DB_2" class="rocksType_DBitem">Item 2</div>
        <div id="rocksType_DB_3" class="rocksType_DBitem">Item 3</div>
        <div id="rocksType_DB_4" class="rocksType_DBitem">Item 4</div>
        <div id="rocksType_DB_5" class="rocksType_DBitem">Item 5</div>
        <div id="rocksType_DB_6" class="rocksType_DBitem">Item 6</div>
        <div id="rocksType_DB_7" class="rocksType_DBitem">Item 7</div>
    </div>
</div> <!-- End of id="rocksMenu_subtypeSlider" -->

У меня уже есть код CSS, определенный для состояний before/current/after - просто нужно их назначить.

Здесь Fiddle.

Thanx.

Педро

Ответ 1

Попробуй что-нибудь вроде этого...

HTML:

<div id="viewport">
    <ul id="list">
        <li class="above">Foo</li>
        <li class="selected">Bar</li>
        <li class="below">Barf</li>
        <li>Boo</li>
        <li>Huh</li>
        <li>Wha</li>
        <li>Oh</li>
    </ul>
</div>
<a href="#" id="up">UP</a> -- <a href="#" id="down">DOWN</a>

CSS

#viewport{
    height: 175px;
    overflow: hidden;
    padding: 0;
}

ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

li{
    border: 1px solid #ccc;
    width: 70px;
    height: 50px;
    line-height: 50px;
    padding: 0 0 0 30px;
    margin: 5px;
    font-size: 1.5em;
    color: #999;
    background-color: #fed;
}

li.selected{
    border-radius: 20px;
    background-color: #fe0
}

li.above{
    border-radius: 10px;
    border-top-left-radius: 35px;    
}

li.below{
    border-radius: 10px;
    border-bottom-left-radius: 35px;    
}

JS:

var viewport = $('#viewport'),
    list = $('#list'),
    itemHeight = $('li', list).first().outerHeight(),
    btnUp = $('#up'),
    btnDown = $('#down'),
    busy = false,
    selected, above, below;

var update = function(){
    selected = $('li:nth-of-type(2)', list).addClass('selected', 200);
    above = selected.prev().addClass('above', 200);
    below = selected.next().addClass('below', 200); 
    setTimeout(function(){ busy = false; }, 200);
};

var goUp = function(){
    if(busy) return; else busy = true;
    $('li', list).removeClass('selected above below');
    list.animate({marginTop: -itemHeight}, 600, 'easeOutBounce', function(){ 
        list.css({marginTop: 0}).append($('li', list).first());
        update();
    });
}
var goDown = function(){
    if(busy) return; else busy = true;
    $('li', list).removeClass('selected above below');
    list
        .css({marginTop: -itemHeight})
        .prepend($('li',list).last())
        .animate({marginTop: 0}, 600, 'easeOutBounce', update);
}
btnUp.on('click', goUp);  
btnDown.on('click', goDown);

Заклинание здесь. Немного более благоприятная версия.

Я думаю, что единственный способ сделать это - следить за тем, что, а не строить вокруг анимации.

Ответ 2

Проверьте мои изменения.

ОБНОВЛЕНО: ссылка включает стиль управления для предыдущих и следующих классов

ОБНОВЛЕНО: ссылка для удаления ярких цветов

http://jsfiddle.net/M3QkB/5/

Вот что я изменил, очевидно, что стиль еще не завершен:

В методе up:

    $('.rocksType_DBitem').removeClass('current');
    $('.rocksType_DBitem').removeClass('before');
    $('.rocksType_DBitem').removeClass('after');
    var middleRock = rocksType_place;
    rocksType_place--;           
    $('#rocksType_DBitems_container :eq(' + middleRock + ')').addClass('current');
    $('.current').prevAll().addClass('before');
    $('.current').nextAll().addClass('after');

В методе down:

    $('.rocksType_DBitem').removeClass('current');
    $('.rocksType_DBitem').removeClass('before');
    $('.rocksType_DBitem').removeClass('after');
    rocksType_place++;
    var middleRock = rocksType_place + 1;        
    $('#rocksType_DBitems_container :eq(' + middleRock + ')').addClass('current');
    $('.current').prevAll().addClass('before');
    $('.current').nextAll().addClass('after');

Общий код может быть реорганизован на такие функции, как очистка классов, которые мы добавляем

Ответ 3

Я бы назначил 3 CSS классы, такие как .before, .current и .after, и смените их при перемещении элементов. Вы можете назначить настройки границ этим классам.

Вот пример Fiddle: http://jsfiddle.net/DBBVU/3/

Ответ 4

Если бы вы могли управлять тем, что три видимых divs получают дополнительный класс, вы можете применить CSS к ним, чтобы изменить радиус границы. Я думаю, что слайд-шоу создается с помощью javascript? Если это так, вы можете посмотреть в коде и попытаться выяснить, какие классы CSS будут разделены на 3 div.

Ответ 5

Лучший способ - назначить css-класс с разными границами на среднем div. Поскольку он доступен для клика, тогда вы узнаете, где он находится. И тогда вы удаляете его таким же образом.