两张图片滑动对比效果实现（VUE3）

已于 2024-06-07 16:33:39 修改
阅读量1k 收藏 29
点赞数 22
分类专栏： 前端 文章标签： vue3 图片滑动对比 极简AI工具箱
于 2024-06-05 12:42:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lsjweiyi/article/details/139464684
版权

在这里插入图片描述
像这种图片滑动对比的效果，网上还不少见吧，但是网上却不好找到完整现成的实现代码，我找到几个地方有类似的代码，但是都不好直接移植到代码里，因为很多都是使用原生html+css+js实现，太复杂了。反而不好应用到vue3中。
于是我借着他们的思路，自己实现了个。

前置条件

  1. 限制两张图片
  2. 图片大小必须一致，不一致会导致上层图片显示不全
  3. 底层图片必须存在，因为窗口的大小由他的大小决定

实现思路

  1. 将两张图片都看做是背景图，他们属于不同的层次
  2. 底层图片用相对定位，也就可以和其他元素一同正常展示，之后的所有元素都处于其包裹范围内，并且根据图片的大小确定整个样式的大小
  3. 上层图片用绝对定位，因为处于底层图片的包裹中，且大小是一样的，所以他们是完全重叠的，它的高度是和底层图片一致，但是宽度是可变的
  4. 利用input 的滑块模式 <input type=“range” v-model="width" />来改变上层图片的宽度，这里也就是利用了vue3的响应式。这是比原生方式实现的简便之处
  5. 由于input的原生样式无法改变，所以得额外做个滑块来实现自定义样式，然后其位置也受width的控制，实际上并不是点击该滑块来滑动的
  6. input是出于最上层的，但是将其隐藏了，所以点击的时候看起来像是点击那个滑块，实际上点击的是input实现的滑动。
  7. 然后再修饰下其他细节，即可

接下来逐步分解出实现的效果，这样就更好理解文字的意思了

第一步，将两张图片分别呈现

在这里插入图片描述

<template>
    <div id="bottomImg" class="bottomImg" :style="{ height: imgHeigth, width: imgWidth, backgroundImage: 'url(' + bottomImg + ')' }">
        <div class="upperImg" :style="{ backgroundImage: 'url(' + upperImg + ')', width: 100 - upperImgWidth + '%' }"></div>
    </div>
</template>
<script lang="ts" setup>
    import { ref, onMounted } from "vue";
    const imgHeigth = ref("0px"); // 图片高度
    const imgWidth = ref("0px"); // 图片宽度
    const bottomImg = ref(new URL("@/images/bottomImg.jpg", import.meta.url).href); // 底图
    const upperImg = ref(new URL("@/images/upperImg.jpg", import.meta.url).href); // 上层图
    const upperImgWidth = ref(50); // 上层图宽度

    // 首次加载时初始化
    onMounted(() => {
        getImgSize();
    });
    // 获取图片尺寸
    function getImgSize() {
        //加载图片获取图片真实宽度和高度
        var image = new Image();
        image.onload = function () {
            imgHeigth.value = image.height + "px";
            imgWidth.value = image.width + "px";
        };
        image.src = bottomImg.value; //img.src 应该是放在 onload 方法后边的, 因为当image的src发生改变，浏览器就会跑去加载这个src里的资源,先告诉浏览器图片加载完要怎么处理，再让它去加载图片
    }
</script>
<style>
    .bottomImg {
        position: relative; /*  相对定位 */
        overflow: hidden; /*  隐藏超出部分 */
    }
    .upperImg {
        position: absolute; /*  绝对定位 */
        top: 0;
        right: 0; /* 从右边开始铺开图片 */
        height: 100%;
        z-index: 1;
        background-position: right top; /* 改变定位方式，默认是左上角，要改为右上角，这样才能实现底图在左边，上层图在右边的效果*/
        border-left: 2px solid rgb(255, 255, 255, 0.5); /* 显示左边框 */
        background-repeat: no-repeat; /*  不重复 */
    }
</style>

代码有详细注释，现在两张图片分别展示的效果有了，但是还没法滑动。

第二步，添加滑块，图片动起来

在这里插入图片描述
就是加了个滑块，双向绑定宽度：

        <!--滑块控制上层图片的宽度 -->
        <input class="inputRange" type="range" v-model="upperImgWidth" min="0" max="100" />

样式

    .inputRange {
        position: absolute;
        height: 100%; /* 这样就能点击任何位置都能实现移动滑块，而不仅仅是滑块所在的位置才有效*/
        z-index: 3; /* 处于最高层次 */
        left: -4px; /*因为原始样式有边界，为了效果更好而调整的，这些都是实测效果，不重要*/
        touch-action: auto;
        width: calc(100% + 4px); /*因为原始样式有边界，为了效果更好而调整的，这些都是实测效果，不重要*/
        /* opacity: 0; */ /*隐藏滑块，这里为了演示，就不隐藏先*/
    }

到这一步，效果已经有了，接下来就是样式的优化。

第三步，增加自定义的滑块

在这里插入图片描述
增加一个这样的滑块样式，其实他仅仅是个样式，它并不具备点击滑动的能力，他的位置是靠响应width的值来改变的

        <!-- 这是对外展示的滑块样式，仅仅是展示样式的，不然原生的样式不好看 -->
        <span class="spanHandle" :style="{ left: 'calc(' + upperImgWidth + '% - 24px)' }"></span>

下面的样式不是重点，自己调整都是可以的，只需要注意使用绝对定位，z-index小于input即可。

  .spanHandle {
        position: absolute; /*绝对定位还是一样的*/
        z-index: 2; /* 样式很多，都不是关键的，只有这里，需要注意层次要低于inputRange*/
        height: 48px;
        width: 48px;
        position: center;
        font-size: 24px;
        border: 1px;
        border-radius: 50%;
        top: calc(90% - 24px);
        background-color: rgb(255, 255, 255, 0.5);
    }

    .spanHandle:before {
        left: 5px;
        transform: rotate(-45deg);
    }
    .spanHandle:after {
        right: -5px;
        transform: rotate(135deg);
    }
    .spanHandle:after,
    .spanHandle:before {
        border-left: 2px solid;
        border-top: 2px solid;
        content: "";
        height: 10px;
        position: absolute;
        top: 50%;
        transform-origin: 0 0;
        width: 10px;
    }

然后把上一步的opacity: 0;启用即可隐藏原始的input滑块

第四步，添加label和上层图片为空时的效果，这一步是可选的

效果就不贴了，就跟开头时差不多

完整代码

<template>
    <div id="bottomImg" class="bottomImg" :style="{ height: imgHeigth, width: imgWidth, backgroundImage: 'url(' + bottomImg + ')' }">
        <span class="imgLabel">{{ bottomLabel }}</span>
        <div v-if="upperImg" class="upperImg" :style="{ backgroundImage: 'url(' + upperImg + ')', width: 100 - upperImgWidth + '%' }">
            <span class="imgLabel">{{ upperLabel }}</span>
        </div>
        <div v-else class="upperUndefined" :style="{ width: 100 - upperImgWidth + '%' }">
            <span class="undefinedSpan">暂无结果</span>
        </div>
        <!-- 这是对外展示的滑块样式，仅仅是展示样式的，不然原生的样式不好看 -->
        <span class="spanHandle" :style="{ left: 'calc(' + upperImgWidth + '% - 24px)' }"></span>
        <!--滑块控制上层图片的宽度 -->
        <input class="inputRange" type="range" v-model="upperImgWidth" min="0" max="100" />
    </div>
</template>
<script lang="ts" setup>
    import { ref, onMounted } from "vue";
    const imgHeigth = ref("0px"); // 图片高度
    const imgWidth = ref("0px"); // 图片宽度
    const bottomImg = ref(new URL("@/images/bottomImg.jpg", import.meta.url).href); // 底图
    const upperImg = ref(new URL("@/images/upperImg.jpg", import.meta.url).href); // 上层图
    const upperImgWidth = ref(50); // 上层图宽度

    const bottomLabel = ref("底图"); // 底图标签
    const upperLabel = ref("上层图"); // 上层图标签

    // 首次加载时初始化
    onMounted(() => {
        getImgSize();
    });
    // 获取图片尺寸
    function getImgSize() {
        //加载图片获取图片真实宽度和高度
        var image = new Image();
        image.onload = function () {
            imgHeigth.value = image.height + "px";
            imgWidth.value = image.width + "px";
        };
        image.src = bottomImg.value; //img.src 应该是放在 onload 方法后边的, 因为当image的src发生改变，浏览器就会跑去加载这个src里的资源,先告诉浏览器图片加载完要怎么处理，再让它去加载图片
    }
</script>
<style>
    .bottomImg {
        position: relative; /*  相对定位 */
        overflow: hidden; /*  隐藏超出部分 */
    }
    .upperImg {
        position: absolute; /*  绝对定位 */
        top: 0;
        right: 0; /* 从右边开始铺开图片 */
        height: 100%;
        z-index: 1;
        background-position: right top; /* 改变定位方式，默认是左上角，要改为右上角，这样才能实现底图在左边，上层图在右边的效果*/
        border-left: 2px solid rgb(255, 255, 255, 0.5); /* 显示左边框 */
        background-repeat: no-repeat; /*  不重复 */
    }
    .inputRange {
        position: absolute;
        height: 100%; /* 这样就能点击任何位置都能实现移动滑块，而不仅仅是滑块所在的位置才有效*/
        z-index: 3; /* 处于最高层次 */
        left: -4px; /*因为原始样式有边界，为了效果更好而调整的，这些都是实测效果，不重要*/
        touch-action: auto;
        width: calc(100% + 4px); /*因为原始样式有边界，为了效果更好而调整的，这些都是实测效果，不重要*/
        opacity: 0; /*隐藏滑块，这里为了演示，就不隐藏先*/
    }
    .spanHandle {
        position: absolute; /*决定定位还是一样的*/
        z-index: 2; /* 样式很多，都不是关键的，只有这里，需要注意层次要低于inputRange*/
        height: 48px;
        width: 48px;
        position: center;
        font-size: 24px;
        border: 1px;
        border-radius: 50%;
        top: calc(90% - 24px);
        background-color: rgb(255, 255, 255, 0.5);
    }

    .spanHandle:before {
        left: 5px;
        transform: rotate(-45deg);
    }
    .spanHandle:after {
        right: -5px;
        transform: rotate(135deg);
    }
    .spanHandle:after,
    .spanHandle:before {
        border-left: 2px solid;
        border-top: 2px solid;
        content: "";
        height: 10px;
        position: absolute;
        top: 50%;
        transform-origin: 0 0;
        width: 10px;
    }
    .imgLabel {
        font-size: 20px;
        color: aliceblue;
        text-shadow: 1px 1px #533d4a, 2px 2px #533d4a;
    }
    .upperUndefined {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        z-index: 1;
        font-size: 60px;
        background-color: rgb(255, 255, 255, 0.8);
        background-position: right top;
        border-left: 2px solid rgb(255, 255, 255, 0.5);
    }
</style>

封装成组件

上面的示例都是死的，封装成组件，就可以切换图片展示：
在这里插入图片描述

组件代码

<template>
    <div id="bottomImg" class="bottomImg" :style="{ height: imgHeigth, width: imgWidth, backgroundImage: 'url(' + props.bottomImg + ')' }">
        <span class="imgLabel">{{ props.bottomLabel }}</span>
        <div v-if="props.upperImg" class="upperImg" :style="{ backgroundImage: 'url(' + props.upperImg + ')', width: 100 - upperImgWidth + '%' }">
            <span class="imgLabel">{{ props.upperLabel }}</span>
        </div>
        <div v-else class="upperUndefined" :style="{ width: 100 - upperImgWidth + '%' }">
            <span class="undefinedSpan">暂无结果</span>
        </div>
        <span class="spanHandle" :style="{ left: 'calc(' + upperImgWidth + '% - 24px)' }"></span>
        <input class="inputRange" type="range" v-model="upperImgWidth" min="0" max="100" />
    </div>
</template>
<script lang="ts" setup>
    import { ref, watch, onMounted } from "vue";
    const imgHeigth = ref("0px");
    const imgWidth = ref("0px");
    const upperImgWidth = ref(50);
    const props = defineProps({
        bottomImg: {
            type: String,
            default: "",
        },
        upperImg: {
            type: String,
            default: "",
        },
        bottomLabel: {
            type: String,
            default: "原图",
        },
        upperLabel: {
            type: String,
            default: "效果图",
        },
    });
    // 跟踪底层图片的变化，因为底层图片是基础
    watch(
        () => props.bottomImg,
        () => {
            getImgSize();
            upperImgWidth.value = 50;
        }
    );
    // 首次加载时初始化
    onMounted(() => {
        getImgSize();
    });
    function getImgSize() {
        //加载图片获取图片真实宽度和高度
        var image = new Image();
        image.onload = function () {
            imgHeigth.value = image.height + "px";
            imgWidth.value = image.width + "px";
        };
        image.src = props.bottomImg; //img.src 应该是放在 onload 方法后边的, 因为当image的src发生改变，浏览器就会跑去加载这个src里的资源,先告诉浏览器图片加载完要怎么处理，再让它去加载图片
    }
</script>
<style>
    .bottomImg {
        position: relative;
        overflow: hidden;
    }
    .upperImg {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        z-index: 1;
        background-position: right top;
        border-left: 2px solid rgb(255, 255, 255, 0.5);
    }
    .imgLabel {
        font-size: 20px;
        color: aliceblue;
        text-shadow: 1px 1px #533d4a, 2px 2px #533d4a;
    }
    .upperUndefined {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        z-index: 1;
        font-size: 60px;
        background-color: rgb(255, 255, 255, 0.8);
        background-position: right top;
        border-left: 2px solid rgb(255, 255, 255, 0.5);
    }
    .undefinedSpan {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        color: #999;
        overflow: hidden;
    }
    .inputRange {
        position: absolute;
        height: 100%;
        z-index: 3;
        left: -4px;
        touch-action: auto;
        width: calc(100% + 4px);
        opacity: 0;
    }
    .spanHandle {
        position: absolute;
        z-index: 2;
        height: 48px;
        width: 48px;
        position: center;
        font-size: 24px;
        border: 1px;
        border-radius: 50%;
        top: calc(90% - 24px);
        background-color: rgb(255, 255, 255, 0.5);
    }

    .spanHandle:before {
        left: 5px;
        transform: rotate(-45deg);
    }
    .spanHandle:after {
        right: -5px;
        transform: rotate(135deg);
    }
    .spanHandle:after,
    .spanHandle:before {
        border-left: 2px solid;
        border-top: 2px solid;
        content: "";
        height: 10px;
        position: absolute;
        top: 50%;
        transform-origin: 0 0;
        width: 10px;
    }
</style>

调用示例代码

<template>
    <div>
        <div>
            <button @click="changeBottomImg">切换底图</button>
            <button @click="removeUpperImg">去除上层图</button>
            <button @click="changeUpperImg">切换上层图</button>
        </div>
        <TwoImgCompare :bottom-img="bottomImg" bottom-label="原图" :upper-img="upperImg" upper-label="结果图"></TwoImgCompare>
    </div>
</template>
<script lang="ts" setup>
    import TwoImgCompare from "@/components/twoImgCompare.vue";
    import { ref } from "vue";
    const bottomImg = ref(new URL("@/images/bottomImg.jpg", import.meta.url).href); // 底图
    const upperImg = ref(new URL("@/images/upperImg.jpg", import.meta.url).href); // 上层图

    // 切换底图
    const changeBottomImg = () => {
        bottomImg.value = new URL("@/images/bottomImg2.jpg", import.meta.url).href;
    };

    // 去除上层图
    const removeUpperImg = () => {
        upperImg.value = "";
    };

    // 切换上层图
    const changeUpperImg = () => {
        upperImg.value = new URL("@/images/upperImg2.jpg", import.meta.url).href;
    };
</script>

PS：开发该组件是用于自己开发的网站：极简AI工具箱，欢迎光临！

lsjweiyi
关注
  • 22
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
专栏目录
vue3.0 能拖动分割线查看两张图的前后对比效果(鼠标滑动两张图片前后对比)。
我只是个很菜的前端
10-19 1072
vue3.0 能拖动分割线查看两张图的前后对比效果(鼠标滑动两张图片前后对比)。
Vue实现移动端左右滑动效果的方法
10-17
最近得到一个新需求，需要在Vue项目的移动端页面上加上左右滑动效果，经过一番折腾，最终决定四月vue-touch。下面小编把实现代码分享给大家，感兴趣的朋友一起看看吧
vue3图片对比组件
风再起时_H的博客
04-16 1688
在春风动力的官网里看到了这个效果，然后自己写了一个 效果： 使用： <he-contrast width="600"> <template #left> <img src="@/assets/img/VFX2-before.jpg" class="images" /> </template> <template #right> <img src="@/assets/img/VFX2-after.jpg" class
纯前端组件实现图片前后对比效果——vue3
最新发布
2201_75514915的博客
12-28 892
vue项目通过组件实现图片前后对比效果，无需插件
Vue实现 “前后”图像对比效果
weixin_44409748的博客
09-25 1724
vue.js实现两张图片“对比”的效果
jQuery二张图片滑动对比效果代码 .rar
12-09
jQuery二张图片滑动对比效果代码 .rar
【vue3】拉动分割线切换左右两张图片
RainHg的博客
08-24 1165
需求：两张图片重叠，中间有一条线作为分界线，拉动线可以分别显示左右图片
基于JS移动端图片上下左右滑动图片的对比度与灰度变化
zpcsgo的博客
04-06 979
图像 底部文本 //阻止页面下拉 $(function(){ document.querySelector('body').addEventListener('touchmove', function(e) { e.preventDefault(); }) });
vue-twentytwenty-图像比较组件，可与Vue.js 2.x一起使用-Vue.js开发
05-27
TwentyTwenty一个小的组件，可让用户快速查看2张图像之间的差异。 基于我为ZURB的TwentyTwenty插件所做的工作。 Live TwentyTwenty一个小组件，可让用户快速查看2张图像之间的差异。 基于我为ZURB的TwentyTwenty插件所做的工作。 实时演示安装$ npm install vue-twentytwenty --save或使用以下方法下载最新版本：https://unpkg.com/vue-twentytwenty/dist/vue-twentytwenty.umd.min.js https://unpkg.com/ vue-twentytwenty / dist / vue-twentytwenty.css用法TwentyTwenty是UMD模块，可以在CommonJS和AMD模块化环境中用作模块。 w ^
前端开源库-vue-image-compare
08-30
前端开源库-vue-image-compareVue图像比较，使用vue.js通过滑块比较两个图像
JS拖动滑块对比图片处理前后效果代码
06-10
一款简单实用的JS拖动滑块对比图片处理前后效果代码，通过拖动滑块来将原图和处理后的图片两张图片进行对比。
基于Vue实现页面切换左右滑动效果
08-29
基于Vue实现页面切换左右滑动效果可以提高用户体验，通过使用transition组件、CSS3动画和Vuex状态管理，可以实现页面之间的滑动切换效果。同时，计算滑动方向和计算属性也都是实现该效果的关键组件。
vue实现页面切换滑动效果
10-15
在Vue.js中实现页面切换滑动效果，可以借助Vue的内置组件`transition`以及`vue-router`来完成。`vue-router`用于处理页面间的路由跳转，而`transition`则负责过渡动画效果。以下将详细讲解如何实现这一功能。 首先...
Vue实现类似Spring官网图片滑动效果方法
10-17
在Vue.js中实现类似Spring官网的图片滑动效果，主要是通过监听鼠标移动事件来动态调整图片展示区域的宽度，从而实现图片的平滑过渡。以下将详细解释这一过程中的关键步骤和技术点。 首先，我们需要创建一个包含两张...
face-api.js+vue实现人脸识别对比
苦夏木禾
07-14 1544
face-api.js+vue实现人脸识别对比
vue根据条件展示不同的图片_vue时间轴风格式的图片展示
weixin_39728221的博客
12-12 1362
项目将近完结，在修正bug的同时，也对自己项目中代码进行回顾分析。看回半年前写的东西，真是很多都感到陌生，所以趁着下午的空档时间总结下之前遇到的难点。好的，先上图，目标效果先分析1. 上下两层，上层样品轮播，下层层进式时间轴 + 小型样本展示，要注意的是上下两层的样品是有逻辑的，即点击下层小样品，上层样品会有响应2. 上下两个步进器，上层左右是会影响下层的，而下层时间轴横移不会影响上层3. 时间刻...
vue 加入对比 3种方法
zhuwang219的博客
12-10 1071
数据添加对比功能
判断图片是否相同
fighting_tl的博客
05-10 2867
1. public function action_test1212(){         $img1 = 'http://img.bstapp.cn/skus/315125071137/a69ba074f8f234fdc41b9d1923df48a2.jpg@1e_400w_400h_80Q_1x.jpg';         $img2 = 'http://img.bstapp.cn/sku
vue 实现grid 定时滑动翻页效果
05-16
Vue实现Grid定时滑动翻页效果需要遵循以下步骤： 1. 定义Grid组件，包含多个Item组件，每个Item组件显示一张图片或内容。 2. 定义父组件Banner，引入Grid组件，在Banner组件中定义定时器，控制Grid组件的翻页。 3. 在Grid组件中，使用Vue动画，实现Item组件的滑动翻页效果，可以使用transition组件或CSS keyframes实现动画效果。 4. 在Banner组件中，通过定时器控制state状态值的变化，从而触发Grid组件切换翻页。 5. 可以通过设置Grid组件的实际宽度和显示宽度实现不同的翻页方式，例如通过显示2张图片的宽度实现左右滑动效果，或者显示1张图片的宽度实现向上或向下滑动效果。 在实现Grid定时滑动翻页效果的过程中，需要注意以下几个问题： 1. 确定Grid组件的实际宽度和显示宽度，不同的显示宽度会影响翻页效果。 2. 使用Vue动画时要考虑性能问题，避免过多的DOM操作导致页面卡顿。 3. 定时器的时间间隔要根据实际情况调整，过长或者过短的时间间隔会影响用户体验。 4. 要考虑到用户交互的情况，例如用户点击或鼠标滚动会中断定时器，需要在代码中添加相应的处理逻辑。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lsjweiyi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值