jquery点击按钮左右滚动效果|极客教程

jquery点击按钮左右滚动效果

在网页开发中，经常会遇到需要为页面上的元素添加滚动效果的情况。本文将介绍如何利用jQuery实现点击按钮后实现元素的左右滚动效果。

实现步骤

1. 引入jQuery库

首先，在页面中引入jQuery库。可以通过以下CDN链接引入最新版本的jQuery：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. HTML部分

在HTML部分，我们需要准备一个包含多个元素的容器，并为容器内的元素添加样式。具体示例代码如下：

<div class="scroll-container">
    <div class="scroll-item">Item 1</div>
    <div class="scroll-item">Item 2</div>
    <div class="scroll-item">Item 3</div>
    <div class="scroll-item">Item 4</div>
    <div class="scroll-item">Item 5</div>
</div>
<button class="scroll-left">左滚动</button>
<button class="scroll-right">右滚动</button>

在上面的示例中，我们创建了一个类名为scroll-container的容器，包含了5个scroll-item元素，并添加了向左滚动和向右滚动的按钮。

3. CSS部分

为了让页面显示效果更加直观，我们需要为上面的HTML元素添加一些CSS样式：

.scroll-container {
    width: 300px;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid #ccc;
}
.scroll-item {
    display: inline-block;
    margin-right: 10px;
    padding: 10px;
    background: #f5f5f5;
}

上述CSS样式的作用是为scroll-container容器设置固定宽度，并隐藏超出容器范围的元素；并设置scroll-item元素为内联块级元素，使之横向排列。

4. jQuery实现

接下来，我们使用jQuery实现点击按钮后的左右滚动效果。具体代码如下：

$(document).ready(function() {
    let scrollAmount = 100;
    let container = $(".scroll-container");

    $(".scroll-left").on("click", function() {
        container.animate({scrollLeft: "-=" + scrollAmount}, "slow");
    });

    $(".scroll-right").on("click", function() {
        container.animate({scrollLeft: "+=" + scrollAmount}, "slow");
    });
});

上述代码首先在页面加载完成后，通过$(document).ready()函数执行后续操作。然后监听向左和向右滚动按钮的点击事件，分别调用animate()函数实现元素的左右滚动效果。

5. 完整示例

将以上HTML、CSS和jQuery代码整合在一起，即可得到完整的实现左右滚动效果的示例。

<!DOCTYPE html>
<html>
<head>
    <title>左右滚动效果</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        .scroll-container {
            width: 300px;
            overflow: hidden;
            white-space: nowrap;
            border: 1px solid #ccc;
        }
        .scroll-item {
            display: inline-block;
            margin-right: 10px;
            padding: 10px;
            background: #f5f5f5;
        }
    </style>
</head>
<body>
    <div class="scroll-container">
        <div class="scroll-item">Item 1</div>
        <div class="scroll-item">Item 2</div>
        <div class="scroll-item">Item 3</div>
        <div class="scroll-item">Item 4</div>
        <div class="scroll-item">Item 5</div>
    </div>
    <button class="scroll-left">左滚动</button>
    <button class="scroll-right">右滚动</button>

    <script>
         $(document).ready(function() { let scrollAmount = 100; let container =$ (".scroll-container");

             $(".scroll-left").on("click", function() { container.animate({scrollLeft: "-=" + scrollAmount}, "slow"); });$ (".scroll-right").on("click", function() {
                container.animate({scrollLeft: "+=" + scrollAmount}, "slow");
            });
        });
    </script>
</body>
</html>

在浏览器中打开该HTML文件，您将看到一个包含了左右滚动按钮的滚动效果。