javascript - CSS:制作水平滚动菜单

Question

我想在我的应用程序屏幕上添加一个菜单。菜单将具有菜单图标，当按下向左或向右箭头时，这些图标可以一次水平滚动一个菜单。根据菜单屏幕，菜单应滚动到该菜单屏幕的菜单图标。

例如:

---

 <   menu1     |  menu2  |   menu3   >

---

假设有 6 个菜单图标，并且一次显示 3 个。按向右箭头时，它应该一次滚动一项。

如果我的屏幕与菜单 4 相关，则必须定位菜单 4。

---

 <   menu4     |  menu5  |   menu6   >

---

而且每个菜单项都应该是可点击的。

请让我知道，我该如何实现。

更新有MouseOver的js

<script type="text/javascript">
    $(function () {
        var div = $('div.sc_menu'),
             ul = $('ul.sc_menu'),
             ulPadding = 15;
        var divWidth = div.width();
        div.css({ overflow: 'hidden' });
        var lastLi = ul.find('li:last-child');
        div.mousemove(function (e) {
            var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;

            var left = (e.pageX - div.offset().left) * (ulWidth - divWidth) / divWidth;
            div.scrollLeft(left);
        });
    });
</script>

JSFiddle

Check here

更新3

更新 4

这是使用 ul 和 li 从数据库构建中检索到的动态菜单。如果 Li 多于屏幕宽度，我只需要一个指向左侧和右侧的箭头来滚动额外的 li，如果有的话。

Answer 1

看这个 fiddle :

http://jsfiddle.net/kzQFQ/49/

$(document).ready(function () {
$('.right').click(function () {
    var position = $('.container').position();
    var r=position.left-$(window).width()
    $('.container').animate({
        'left': ''+r+'px'
    });
});    

$('.left').click(function () {
    var position = $('.container').position();
    var l=position.left+$(window).width()
    if(l<=0)
    {
    $('.container').animate({
        'left': ''+l+'px'
    });
    }
});    
});