css3页面鼠标横向滑动效果

CSS3页面鼠标横向滑动效果是一种非常流行的网页设计技术，它能够让网页看起来更加动态和引人注目。该效果可以通过一些简单的CSS属性和JavaScript代码实现。下面我们来详细了解一下。

/* CSS */
/* 确定容器宽高 */
.container {
    width: 100%;
    height: 500px;
    overflow-x: scroll; /* 垂直滚动条 */
    white-space: Nowrap; /* 设置不换行 */
}

/*适应浏览器窗口大小*/
.container > div {
    display: inline-block;
    width: 100vw;
    height: 500px;
}

css3页面鼠标横向滑动效果

首先，在CSS中我们需要先确定一个容器（.container）的宽度和高度，以及让它显示一个水平滚动条。同时，我们也要设置该容器中的子元素不换行（white-space: Nowrap;）。接下来再设置子元素（div）为inline-block，让它可以横向排列。并且，我们还需要在子元素的宽度中设置100vw，这样它就可以完全适应浏览器窗口大小。

//JS
const container = document.querySelector('.container');
const sections = container.children;

let start;
let current = 0;

container.addEventListener('mousedown',(e) => {
    e.preventDefault();
    start = e.pageX - container.offsetLeft;
    container.classList.add('active');
});

container.addEventListener('mousemove',(e) => {
    if (!start) return;
    current = e.pageX - container.offsetLeft;
    const scrollLeft = current - start;
    container.scrollLeft = -scrollLeft;
    console.log(scrollLeft);
});

container.addEventListener('mouseup',() => {
    container.classList.remove('active');
});

在JavaScript中，我们需要先获取容器元素（.container）以及它所有的子元素（div），然后开始监听鼠标点击事件。当鼠标在容器内按下时，我们需要获取当前鼠标的位置以及容器的offsetLeft属性。接着在mousemove事件中，我们可以利用pageX、offsetLeft和scrollLeft属性来计算出当前子元素应该显示的位置，从而实现鼠标横向滑动的效果。最后，我们需要在mouseup事件中将active类从容器中移除，以便于下一次的鼠标滑动。

最后，这种CSS3页面鼠标横向滑动效果可以让网页看起来更加动态和生动，增加用户体验。使用一些简单的CSS属性和JavaScript代码即可实现，非常方便。因此，它也成为了当前很多网页设计师和开发者的首选技术之一。

css3页面鼠标横向滑动效果

相关文章