JQuery实现左右滚动菜单特效

标题：JQuery实现左右滚动菜单特效攻略

代码块：

<!--HTML代码-->
<div class="scroll-menu">
    <ul>
        <li><a href="#">菜单1</a></li>
        <li><a href="#">菜单2</a></li>
        <li><a href="#">菜单3</a></li>
        <li><a href="#">菜单4</a></li>
        <li><a href="#">菜单5</a></li>
        <li><a href="#">菜单6</a></li>
    </ul>
    <div class="prev"></div>
    <div class="next"></div>
</div>

/*CSS代码*/
.scroll-menu {
    position: relative; /*相对位置，方便子元素布局*/
    overflow-x: hidden; /*隐藏水平滚动条*/
    /*其他样式属性*/
}
ul {
    position: relative; /*相对位置，方便子元素布局*/
    white-space: nowrap; /*防止换行*/
    /*其他样式属性*/
}
li {
    display: inline-block; /*水平排列*/
    /*其他样式属性*/
}
.prev, .next {
    position: absolute; /*绝对位置，方便布局*/
    /*其他样式属性*/
}
.prev {
    left: 0; /*向左对齐*/
}
.next {
    right: 0; /*向右对齐*/
}

/*JavaScript代码*/
$(function() {
    var scrollMenu = $('.scroll-menu ul'); //获取菜单元素
    var scrollItemWidth = scrollMenu.find('li').outerWidth(true); //获取单个菜单项宽度，包括外边距
    var scrollItemCount = scrollMenu.find('li').length; //获取菜单项的数量
    var totalWidth = scrollItemCount * scrollItemWidth; //计算菜单总宽度
    var visibleWidth = $('.scroll-menu').outerWidth(); //计算可见区总宽度
    var maxOffsetX = totalWidth - visibleWidth; //计算偏移量的最大值
    var curOffsetX = 0; //当前偏移量初始化
    $('.next').click(function() {
        if(curOffsetX < maxOffsetX) { //判读是否已达最大值
            curOffsetX += scrollItemWidth; //增加偏移量
            scrollMenu.animate({left: "-=" + scrollItemWidth + "px"}, 500); //左滚动菜单
        }
    });
    $('.prev').click(function() {
        if(curOffsetX > 0) { //判读是否已至最左侧
            curOffsetX -= scrollItemWidth; //减小偏移量
            scrollMenu.animate({left: "+=" + scrollItemWidth + "px"}, 500); //右滚动菜单
        }
    });
});

攻略描述：

1. HTML结构：通过ul-li组合菜单项，同时在父元素最后添加“上一页”和“下一页”两个div元素。

2. CSS样式：通过设置ul元素的白色空格属性，使菜单项水平排列；使用绝对和相对定位，使上一页和下一页两个按钮恰好位于菜单左侧和右侧；其他样式属性用于美化菜单效果。

3. JavaScript逻辑：首先获取菜单元素和单个菜单项宽度等信息。然后，通过上一页和下一页按钮点击事件，分别判断当前菜单是否达到最左侧或最右侧，并设置是左滚动菜单还是右滚动菜单，最后增加或减小菜单偏移量，同时通过jQuery中的animate函数，设置菜单偏移动画效果实现菜单的滚动。

阅读剩余 38%