“即时”更改 CSS 属性答案

【问题标题】：Changing CSS properties 'on-the-fly'“即时”更改 CSS 属性
【发布时间】：2013-04-05 00:06:14
【问题描述】：

我有这个垂直幻灯片可以通过向上/向下箭头导航。幻灯片的容器 div 中有 7 个项目（div），但一次只有 3 个可见。事实上，这个幻灯片是一个菜单——从可见的 3 个项目中，中间的一个是可点击的，它将加载页面中其他位置的 div 中的内容。

现在，由于有 3 个项目，并且只有第 2 个项目（中间一个）是可点击的，我需要在它们之间创建一个差异。所以，我想像这样更改项目边框/边框半径：

问题是我不知道如何做到这一点，因为 div 在可见区域中不断改变位置。我真的需要帮助。

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 代码 - 只需分配它们。

这是Fiddle。

谢谢。

佩德罗

【问题讨论】：

你实际上想改变什么？边界？
我没有看到小提琴？您还应该发布用于“滚动”菜单的 javascript 代码，因为这是应用 css 声明的地方。
“换地方”是什么意思？您正在重新排列它们在 DOM 中的顺序？
小提琴链接已修复。至于插入js代码……有点泛滥，我没有加进去的原因。
+1 为绘制此图的技术规范设计师。

标签： jquery css jquery-animate slideshow

【解决方案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);

Fiddle here。 Slightly fancier version.

我认为做到这一点的唯一方法是跟踪是什么，而不是围绕动画构建它。

【讨论】：

我可以看到我在这方面做了很多工作。感谢您的努力。
这是一个非常好的解决方案！

【解决方案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/

【讨论】：

我已经定义了 CSS - 需要根据它们的可见性状态来分配它们。
我喜欢您的解决方案 - 不过有一个问题：如何通过 jQuery 为这些更改设置动画，使其与 IE8 兼容？
看起来您可以为它们设置动画，但您可能必须将属性写入 javascript：stackoverflow.com/questions/1010058/…
我知道如何使用 animate()。我不知道如何在您的代码中实现它，因为您正在使用类。救命！

【解决方案4】：

如果您可以让三个可见的 div 获得一个额外的类，那么您可以将 CSS 应用于它们以更改边框半径。我猜幻灯片是用一些 javascript 创建的？如果是，您可以查看代码并尝试找出将不同的 CSS 类分配给 3 个 div。

【讨论】：

【解决方案5】：

最好的方法是在中间 div 上分配一个具有不同边框的 css-class。因为它是可点击的，所以你不知道它在哪里。然后你以同样的方式删除它。

【讨论】：