CSS交互式图片对比组件

通常在我们在需要对某地或者某物不同时期的情况对比时,多采用图片并列或者图片轮播的形式,但是这样的形式并不直接,且缺乏交互性。为了解决这个问题,我们可以采用交互式的图片控件来实现。其主要思想就是将两张前后图重合,用户可以自由选取图片的显示部分,效果如下:

CSS交互式图片对比组件_第1张图片

为了实现这个效果,我们将使用resize属性,使其可以在横向变形。为了防止图片拉扯变形,我们用一层div将一张图包裹,置于另一张图的上层。这是仅需调整div框的长度就可以实现图片显示区域的变化。

    DOM结构如下:

    
           
             

你可能感兴趣的:(web,css,交互,web)