Page 199 - css揭秘

overflow: hidden;
resize: horizontal;
}

.image-slider > div::before {
content: '';
position: absolute;
bottom: 0; right: 0;
width: 12px; height: 12px;
padding: 5px;
background:
linear-gradient(-45deg, white 50%, transparent 0);
background-clip: content-box;
cursor: ew-resize;
}

.image-slider img {
display: block;
user-select: none;
}

试一试 play.csssecrets.io/image-slider

范围输入控件方案

上述基于 CSS resize 的方案表现很好，而且只需要极少的代码。不
过，它还是有一些不足之处。

„ 它对键盘来说是不可访问的。
„ 调整上层图片的唯一方法就是拖动。对于较大的图片，或有运动障
碍的用户来说，这就比较讨厌了。如果允许用户点击某一个点就可
以把图片宽度调整到那个点所在的位置，它的体验就会大幅提高。
„ 用户只能在上层图片的右下角进行调整大小的操作。即使我们已经
对它的样式进行了强化，但它仍然可能被用户忽略。

如果我们愿意用一点脚本，就可以将一个原生的滑块控件（HTML 范围
输入控件）覆盖在图片上，用它来控制上层图片的伸缩，这样就可以解决上
述三个问题。由于一定要用到 JavaScript，不妨用脚本来添加所有的附加元
素，这样就可以把结构代码写到最精简的程度：

<div class="image-slider"> HTML
<img src="adamcatlace-before.jpg" alt="Before" />
<img src="adamcatlace-after.jpg" alt="After" />
</div>

然后，我们的 JavaScript 代码会把它转换成以下结构，并在滑块上添加
一个事件，这样它就可以控制 div 的宽度了：

168 第 6 章 用户体验

඀ࠡ JOEC