水平卡片反应引导 - Javascript

简介

水平卡片反应引导是一种利用Javascript实现的用户界面反应效果。当用户鼠标移动到卡片上方时，卡片将自动向左或向右滑动，以增强用户体验并更好地呈现内容。该效果既实用又美观，可以轻松地应用于网站或应用程序中。

实现过程

HTML

我们需要在HTML中定义一个卡片容器，如下所示：

<div class="card-container">
    <div class="card">
        <img src="image.jpg" alt="Card image">
        <div class="card-text">
            <h2>Card title</h2>
            <p>Card description</p>
        </div>
    </div>
</div>

我们用一个<div>元素来包含所有的卡片，使用两个<div>元素分别充当卡片容器和卡片本身。在卡片容器中，我们为其添加了一个CSS类名card-container，以便后续对其进行样式控制。在卡片本身中，我们添加了一个<img>元素作为卡片的图片展示，并在其下方添加了一个包含标题和描述的<div>元素。为该<div>元素添加了一个CSS类名card-text，以便后续对其进行样式控制。

CSS

我们需要在CSS中设置卡片的样式，如下所示：

.card-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}

.card {
    position: relative;
    background-color: #fff;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, .2);
    border-radius: 5px;
    overflow: hidden;
    transition: transform .3s ease-in-out;
    cursor: pointer;
}

.card:hover {
    transform: scale(1.05);
}

.card:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    pointer-events: none;
    transition: all .3s ease-in-out;
}

.card:hover:before {
    transform: translateX(calc(-100% - 50px));
}

首先，我们为卡片容器设置了flex布局，以确保卡片能够水平居中。然后，我们为卡片设置了背景颜色、阴影、圆角和溢出隐藏。为了实现卡片在鼠标悬停时的缩放效果，我们使用了CSS3的缩放属性transform: scale(1.05);。

接着，我们使用一个::before伪元素在卡片上方创建了一个渐变遮罩层，并为其添加了一个CSS类名card-hover，即当鼠标悬停时显示该遮罩层。在hover状态下，我们使用transform: translateX(-100%);将遮罩层向左平移，从而实现卡片往左滑动的效果。

Javascript

我们需要使用Javascript来实现鼠标悬停时卡片的滑动效果，如下所示：

const cards = document.querySelectorAll('.card');

cards.forEach(card => {
    card.addEventListener('mousemove', (e) => {
        const cardText = card.querySelector('.card-text');
        const halfCardWidth = card.offsetWidth / 2;
        const halfCardHeight = card.offsetHeight / 2;
        const mouseX = e.clientX - card.offsetLeft - halfCardWidth;
        const mouseY = e.clientY - card.offsetTop - halfCardHeight;
        cardText.style.transform = `translate(${mouseX / 10}px, ${mouseY / 10}px)`;
    });

    card.addEventListener('mouseleave', () => {
        const cardText = card.querySelector('.card-text');
        cardText.style.transform = 'translate(0, 0)';
    });
});

我们使用querySelectorAll('.card')方法选中所有的卡片，并使用forEach方法为每个卡片添加了两个事件监听器：mousemove和mouseleave。

在mousemove事件监听器中，我们首先获取卡片中包含标题和描述的<div>元素，在卡片被鼠标hover时，计算出鼠标相对于卡片中心的横向和纵向距离，并使用模板字符串将其转化为CSS属性transform: translate(X, Y)，从而实现卡片文本相对于鼠标的偏移效果。

在mouseleave事件监听器中，我们恢复卡片文本的原始位置（即不进行偏移），从而确保卡片在鼠标移开后能够恢复正常状态。

总结

水平卡片反应引导是一种实用、美观的用户界面效果，使用Javascript实现其卡片文本相对于鼠标的偏移效果，能够增强用户体验并更好地呈现内容。需要注意的是，在实现过程中，我们需要结合HTML、CSS和Javascript三个方面进行配合，从而实现最终的效果。