[CSS] 我尝试创建一个 UI,允许您通过滑动图像来比较图像前后的图像。

概述

你见过这样的用户界面吗?

在本文中,我将介绍如何仅使用 CSS 创建这样的 UI,以及如何使用Image Compare Viewer。

仅使用 CSS 实现时

使用 CSS 实现时,使用 CSS 属性resize,所以请注意,用于在前后切换的拖动 UI 有点难以处理。

基础写作

我们将在我们将样式应用于以下 HTML 的前提下继续进行。

<div class="container">
    <div class="before">
        <img src="**/**/before.jpeg" class="image"/>
    </div>
    <img src="**/**/after.jpeg" class="image"/>
</div>

 基本方针是

将beforeクラス div 与after画像 与position: absolute; 和使用 css 属性调整大小元素更改 beforeクラス div

我会这样设计。

应用样式 STEP. 1 图像前后叠加

首先,将beforeクラス div 放在after画像 上方。如果您为.container 指定position: relative;,为.before 指定position: absolute;,前后图像可以叠加。

.container {
  position: relative;
  width: fit-content; 
}

.before {
  position: absolute;
}

.image {
  display: block;
}

见笔by 德谷 | 奇塔 () 上.

STEP. 2 启用调整大小

为了能够调整 div 元素的大小,通过指定resize: horizontal; 和overflow: auto;,您可以水平调整大小。

这样只要水平方向有屏幕就可以resize,决定max-width 以确定最大大小。

.container {
  position: relative;
  width: fit-content; 
}

.before {
  position: absolute;
  resize: horizontal; /* 追加 */
  overflow: auto; /* 追加 */
  max-width: 100%; /* 追加 */
}

.image {
  display: block;
}

看笔by 德谷 | 奇塔 () 上.

* 您可以从图像右下角的图标调整大小。

STEP. 3 调整设计

调整下面的样式。

指定beforeクラス div 的宽度,因为我们希望在前后显示一半。 为更好的图像边界添加边框。

修改后的样式如下所示:

.container {
  position: relative;
  width: fit-content;
  border: 1px solid rgba(0,0,0,.12); /* 追加 */
}

.before {
  position: absolute;
  resize: horizontal;
  overflow: auto;
  max-width: 100%;
  width: 50%; /* 追加 */
  border-right: 1px solid red; /* 追加 */
}

.image {
  display: block;
}

看笔by 德谷 | 奇塔 () 上.

当使用Image Compare Viewer 实现时

如果您创建的 UI 允许您仅使用 CSS 比较图像之前和之后的图像,可用性不是很好,因为要拖动的部分很难理解。

在这种情况下,使用Image Compare Viewer 很方便。

用法 步骤 1 导入外部文件。

将脚本和样式表编写为外部文件。

<head>
  <script src="https://unpkg.com/image-compare-viewer/dist/image-compare-viewer.min.js"></script>
  <link type="text/css" href="https://unpkg.com/image-compare-viewer/dist/image-compare-viewer.min.css">
</head>

使用 npn 时,请使用此命令。

npm install image-compare-viewer
STEP. 2 编写 HTML

描述前后图像并指定父元素的 id。

<div id="image-compare">
  <img src="**/**/before.jpeg" alt=""/>
  <img src="**/**/after.jpeg" alt=""/>
</div>
STEP. 3 编写 JavaScript

初始化脚本并使用父 ID 运行它。

import imageCompareViewer from "https://cdn.skypack.dev/image-compare-viewer@1.5.0";
const element = document.getElementById("image-compare");
const viewer = new imageCompareViewer(element).mount();
这是完成的

见笔by 德谷 | 奇塔 () 上.

定制

使用选项,您可以自定义 UI。

财产 价值 评论 控制颜色 颜色 控制器边框,图片颜色 控制阴影 布尔 遮蔽控制器 加圈 布尔 在控制器周围绕一圈 添加圆形模糊 布尔 是否模糊控制器周围的圆圈 显示标签 布尔 标记图像 标签选项 -- 标签选项 ┗ 之前 细绳 标签信 ┗之后 细绳 标签信 ┗ 悬停 布尔 悬停时显示标签 平滑 布尔 触摸动画 平滑量 数字 平滑时间 悬停开始 布尔 您希望在悬停时跟随框架吗? 垂直模式 布尔 垂直分割 初始点 数字 起始位置 流体模式 布尔 你想让容器的高度和宽度是独立的流体吗? 概括

在本文中,我们将讨论允许您前后滑动图像并进行比较的 UI。

我介绍了如何仅使用 CSS 实现以及如何使用Image Compare Viewer 实现。

我在做一个工程师暑假项目,所以平时工作中不会用到,我尝试了我想尝试的。

创建一个允许您在图像前后滑动并仅使用 CSS 进行比较的 UI 似乎是完全不可能的。呈现的内容是有限的。

感谢您阅读到最后!如果你想听更多的细节,让我们直接在 Dev Talk 中交谈!

我们也在推特上发送信息,所以如果你喜欢,请关注我们!

原创声明:本文系作者授权爱码网发表,未经许可,不得转载;

原文地址:https://www.likecs.com/show-308624521.html

42人参与, 0条评论 登录后显示评论回复

你需要登录后才能评论 登录/ 注册