0

ユーザーのスクロールに基づいて「選択された」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);
    }
};

Fiddle をチェックしてください: http://jsfiddle.net/7uCS8/1/

4

1 に答える 1

0

常に画面上で何かを選択したままにしたい場合は、選択された要素を計算するために使用する を変更して、最初divisionsWidth2のアイテムのみを使用する代わりに、li アイテムの平均幅を使用することができます: http://jsfiddle .net/7uCS8/2/

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

liすべてのの幅が同じであれば、さらに見栄えがよくなります。それがあなたにとってどれほど難しいかわかりません。

于 2013-01-26T01:26:12.440 に答える