Question

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

例：

 <   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

Check here

UPDATE3

Yahoo's Navigation

更新4

这是从db build with ul＆amp; amp;李的。如果Li比屏幕宽度多，我只想要一个左箭头和一个箭头。右侧滚动额外的li，如果有的话。

Answer 1

看到这个小提琴：

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'
    });
    }
});    
});

Answer 2

关于水平滚动菜单here

的好文章

和DEMO（注意：缩小浏览器的大小）

Answer 3

跳这应该是帮助你看到链接

http://jquery.malsup.com/cycle/int2.html

请参阅页面末尾的非图片内容

看到这个小提琴：http://fiddle.jshell.net/vac9x/1/

CSS：制作水平滚动菜单

3 个答案: