javascript 滑块_如何使用JavaScript创建分屏滑块

javascript 滑块

在今天的视频教程中，我将向您展示如何使用JavaScript创建“分屏”滑块元素（或UI，无论您喜欢称呼它）。 灵感来自海盗船网站上的网页 ; 让我们看看如何为自己的项目构建一个。

我们将要建立的

首先让我们看一下我们正在构建的演示。 在CodePen上查看项目 ，或从GitHub获取源文件。

观看截屏

1.建立面板

那怎么办呢？ 首先在HTML标记中构建两个单独的面板。 我使用了两个div元素和一类panel 。 第一个具有附加类别的bottom ，另一个具有附加类别的top 。 每一个都包含另一个div来包装内容。

<div class="splitview">
    <div class="panel bottom">
        <div class="content">
        
        </div>
    </div>   
    <div class="panel top">
        <div class="content">
        
        </div>
    </div>    
</div>

将您喜欢的任何内容（图像，标题等）放入content div中。

完成这些操作后，在关闭splitview标记之前添加一个新的div作为句柄。

<div class="handle"></div>

2.添加一些样式以堆叠面板

第一个重要样式会将我们的两个面板堆叠在一起，确保它们也流畅。

/* Panels. */
.splitview {
    position: relative;
    width: 100%;
    min-height: 45vw;
    overflow: hidden;
}

.panel {
    position: absolute;
    width: 100vw;
    min-height: 45vw;
    overflow: hidden;
}

分别对每个面板的top和bottom样式设置，例如为它们提供不同的background-color ，并根据需要对其中的内容进行样式设置。 要注意的一件事是确保每个z-index的堆叠顺序正确。

.bottom {
    background-color: rgb(44, 44, 44);
    z-index: 1;
}

.top {
    background-color: rgb(77, 69, 173);
    z-index: 2;
}

3.涂上简单的面膜

现在，我们的顶部面板完全覆盖了下面的面板，因此让我们通过减小其宽度来进行试验：

.top {
    background-color: rgb(77, 69, 173);
    z-index: 2;
    width: 50vw;
}

您现在应该会发现类似这样的内容，顶部面板仅到达页面的中间（ 50vw ）：

4.开始 JavaScript

现在，我们已经使用CSS解决了问题，让我们转向JavaScript，看看我们是否可以对这种滑动蒙版效果进行动画处理。 我们首先要求浏览器执行一个函数，但是只有在DOM加载后才执行：

document.addEventListener('DOMContentLoaded', function() {
    
});

我们其余的代码将放在花括号之间的该函数中。

接下来，我们将通过获取父元素，顶部面板（即我们将要更改的唯一面板）和handle元素来分配一些变量。

var parent = document.querySelector('.splitview'),
        topPanel = parent.querySelector('.top'),
        handle = parent.querySelector('.handle'),

5.建立句柄

在继续进行之前，让我们设计一下手柄的样式。

/* Handle. */
.handle {
    height: 100%;
    position: absolute;
    display: block;
    background-color: rgb(253, 171, 0);
    width: 5px;
    top: 0;
    left: 50%;
    z-index: 3;
}

这是一个5像素宽的黄色横条，沿容器的高度移动，并位于视口的中心。 它的z-index为3，以确保它位于顶部。

让它动起来

每当我们在视口中移动鼠标光标时，我们都希望获取它的x坐标。 然后，我们要移动手柄并根据这些坐标设置顶板的宽度。

我们从父元素上的事件侦听器开始，然后将句柄的left style属性设置为等于event.clientX值。

parent.addEventListener('mousemove', function(event) {
        // Move the handle.
        handle.style.left = event.clientX + 'px';
});

这就照顾了我们的移动手柄，让我们现在调整面板的大小，使其再次等于event.clientX 。

parent.addEventListener('mousemove', function(event) {
        // Move the handle.
        handle.style.left = event.clientX + 'px';

        // Adjust the top panel width.
        topPanel.style.width = event.clientX + 'px';
});

我们做完了！

做得好，到达终点； 通过相对简单CSS和JavaScript，我们创建了出色的分屏滑动蒙版效果。 进一步讲，就像我在视频中所做的那样，我们也可以倾斜手柄– 在CodePen上查看演示以了解如何实现！

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-create-a-split-screen-slider-with-javascript--cms-28844

javascript 滑块