jquery 上下滚动显示

JQuery是一个功能强大的JavaScript框架，提供了丰富的API和插件，使得前端开发变得更加简单、高效。其中，JQuery上下滚动显示插件也十分实用，可以帮助我们实现网页上下滚动的效果。

$(document).ready(function(){
    $(".scrollBox").Scroll({ 
        line: 1, //滚动线高度
        speed: 500, //滚动速度
        timer: 3000, //滚动延迟
        up: "btnUp", //向上按钮
        down: "btnDown" //向下按钮
    });
});

以上代码中，我们使用了scrollBox作为滚动容器的class选择器，同时传入了一些参数来控制滚动的速度、延迟、滚动按钮等。此外，我们还可以自定义一些样式来美化滚动条的样式、按钮等。

.scrollBox{
    height: 100px;
    overflow: hidden;
    position: relative;
}
.scrollBox ul{
    margin: 0;
    padding: 0;
    height: 100%;
    position: relative;
}
.scrollBox li{
    list-style: none;
    height: 20px;
    line-height: 20px;
    border-bottom: 1px solid #ddd;
    padding: 0 10px;
}
.btnUp{
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
}
.btnDown{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
}

以上代码主要定义了滚动容器的高度、边框等，以及滚动条内部元素的样式，同时对滚动按钮也进行了一些设置。

使用JQuery上下滚动显示插件，可以让网页看起来更加动态、生动，给人带来更好的用户体验。只需要简单地引入插件、传入参数，并对滚动条样式进行一些调整，就可以轻松地实现这一效果。