一、效果简介

本次介绍的是一种图片对比效果,在设计师根据要求调整图片时,需要对比一下.但就算图片并排放在一起,有一些细微地方的调整往往也看不太清楚.于是长沙网站建设就想出一种能够很直观的看出两张近似相同图片有哪里不一致的功能.话不多说,咱们直接上图:

二、效果解析

上图为了展示,所以将处理后的图片效果做明显了一些,实际上是两张一样大小的图片叠在了一起.左边显示的是处理前的图片,右侧显示的是处理后的图片.中间这一条竖线可以左右拖动,用来控制两张图各自显示多少内容.

长沙网站制作将竖线往右边拖动,则处理前图片的区域会往右延伸并覆盖处理后的图片;往左拖动,处理前图片的区域则会往左收缩,会出来更多的空间显示处理后的图片.而我们这样来回的进行拉扯,两张哪里有不一样就能很容易得看出来了.

核心代码:

function bsp(clientX) {
      const rect = bolls.getBoundingClientRect();
      let x = clientX - rect.left;
      x = Math.max(0, Math.min(x, rect.width));
      beforeWrap.style.width = x + 'px';
      lines.style.left = x + 'px';
    }

这段代码是功能最核心的部分.我们把中间分隔两张图的这条线称为lines,在鼠标按住lines进行拖动时,实时计算出它所处的横坐标,而这个横坐标到整个区域左边的距离就是处理前的图片的边界.又因为overflow: hidden的作用,超过这个边界的图片会被裁剪掉,于是没有被裁剪掉的区域,显示的就是左边处理前的图片.而被裁剪掉的部分,则会显示右边处理后的图片.又因为lines它的位置是实时计算的,无论怎么拖动,左右图片的显示都会跟着变化.这样就实现了长沙网站设计想要的图片对比功能.

三、完整代码以及功能视频展示

完整代码图如下：

效果视频演示：

以上就是长沙网站开发整理出的网页图片对比功能的制作方法,如果还想让这个效果更加完整,也可以在这个基础上增加初始位置、过渡动画或键盘控制等效果.希望对您有所帮助！

长沙蒲公英网络专业提供高效且优质的网站优化服务，为您的企业发展保驾护航！欢迎来电咨询：0731-84069615。