当前位置:Gxlcms > html代码 > CSS秘密花园:交互式图像对比_html/css_WEB-ITnose

CSS秘密花园:交互式图像对比_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:16人阅读

《 CSS Secrets 》是 @Lea Verou 最新著作,这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书,经过一段时间的阅读,我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感,与大家一起分享。

有时候我们需要向别人展示两幅图像的视觉差异,通常一幅是修改前的图像、一幅是修改后的。例如,把两幅图像放在一起,展示照片处理的效果。比如一些美容师的网站要展示某些美容护理的效果,某个地理区域发生灾难的结果。

最常见的方案是将两张图片并排放置。但是,这样的话人的眼睛就只能注意到非常突出的差异、而察觉不到那些小的变化。如果对比不是那么重要或者两图之间的差异非常大的话,这种方法是没有问题的,但是对于其它情况呢,我们需要一些更好的方法。

从用户体验的角度看,这个问题有很多解决方案。一种常见的解决方案是通过一个GIF动图或CSS动画在同一个位置快速连续地显示两张图片。这比两张图片并排放要好很多。但是用户要发现这之间的差异也比较耗时,因为用户需要等待好几次迭代,好让他们的眼睛能够把整张图片观察完。

一个交互式图像对比小部件的例子,可以使用户对比2011年伦敦暴动带来的灾难性结果,来自英国主要新闻媒体The Guardian。用户可以拖动两幅图像中间的白色竖条,但是并没有提示来告诉用户“这是可以拖动的”,这就是为什么需要帮助文本(“Move the slider…”)了。理想情况下,一个良好的、可学习的界面是不需要帮助文本的。

一个更实用的解决方案是“image comparison slider”。它把两个图像叠加在一起,让用户拖动divisor进行选择,是显示这一个还是另一个。当然,这样的控制在HTML中不是实际存在的。我们需要通过我们真实存在的元素来模拟它,多年来也一直有许多实现这个效果的示例,通常需要JavaScript框架和一大堆的JS代码。

在一些变型中,用户可以直接移动鼠标来代替拖动。这样做的好处是可以更容易让用户注意到并去使用,但是体验却是相当刺激的。

有没有什么简单的方法可以实现这样的一个控制?当然有,而且有俩!

CSS resize方案

如果我们仔细想想,image comparison slider通常包括一张图像,和一个水平方向大小可调的元素,用于显示另一张图像。这通常就是需要JavaScript框架的地方了:让顶部的图像水平方向大小可调。但是,我们并不是一定需要脚本来让元素大小可调。在CSS3中,我们有这样一个属性: resize 。

即使你没有听过这个属性,你很可能已经使用过它,因为它在