Question

我有一个水平滚动，“selected”li类根据用户滚动而改变。我想要做的是将选定的li置于固定位置，因为它在滚动一段时间后消失。

我的代码：

<div id="scroller2">
<ul id="ulscroller">
<li value="01" class="selected">1<div class="li-image"><img src="img/icon-dark.png" style="float: left;"></div></li>
<li value="02">2<div class="li-image"><img src="img/icon-dark.png" style="float: left;"></div></li>
...

<li value="30">30<div class="li-image"><img src="img/icon-dark.png" style="float: left;"></div></li>

</ul>

</div>

var scroller2 = document.getElementById("scroller2"),
    lis = scroller2.getElementsByTagName("li"),
    divisionsWidth2 = lis[0].offsetWidth - 20,
    current = 0
    scroller2.onscroll = function(){
    var selected = Math.floor(scroller2.scrollLeft/divisionsWidth2);
    if (current!==selected) {
        lis[current].className="";
        lis[selected].className="selected";
        current = selected;

        $("#nono2").html(lis[current].value);
    }
};

请查看小提琴：http://jsfiddle.net/7uCS8/1/

Answer 1

如果您想在屏幕上始终保持明显选择的内容，您可以更改用于计算选择哪个元素的divisionsWidth2以使用li项目的平均宽度而不是仅使用第一个一个：http://jsfiddle.net/7uCS8/2/

avewidth = 0;
$("li").each(function () {
   avewidth += $(this).get(0).offsetWidth; 
});
avewidth = parseInt(avewidth / $("li").length);

如果所有li s的宽度相等，那看起来会更好;不确定对你来说有多难。

在水平滚动上为选定的li设置固定位置

1 个答案: