小编صفي*_*صفي的帖子

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

例:

 <   menu1     |  menu2  |   menu3   >

假设有6个菜单图标,一次可见3个.按下右箭头,它应该一次滚动一个项目.

如果我的屏幕与菜单4相关,则必须定位menu4.

 <   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

点击这里

UPDATE3

更新4 …