我有一个水平滚动,其中“选定的” 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/