使用Js实现有趣的拖动黑白对比图片特效

最新推荐文章于 2024-05-22 10:05:33 发布

itclanCoder

最新推荐文章于 2024-05-22 10:05:33 发布

阅读量140

点赞数

文章标签： javascript 前端 html css 开发语言

本文链接：https://blog.csdn.net/wzc_coder/article/details/131862507

版权

在有一些网站示例产品里面,为了比较处理之前和之后的一个效果对比图

那么就可以使用这个特效

示例效果

原生Js实现

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>有趣的拖动黑白对比图片特效</title>
  <style>
    .container{
      max-width:900px;
      margin:auto;
    }

    #inked-painted { 
      position: relative;
      font-size: 0; 
      -ms-touch-action: none;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
    }

    #inked-painted img { 
      width: 100%;
      height: auto; 
    }

    #colored { 
      background-image: url(https://codyhouse.co/demo/image-comparison-slider/img/img-original.jpg);
      position: absolute;
      top: 0; 
      left: 0;
      height: 100%;
      width: 50%;
      background-size: cover; 
    }

    #inked-painted:hover {
      cursor: col-resize; 
    }
  </style>

</head>
<body>
<div class="container">
  <div id="inked-painted">
    <img src="https://codyhouse.co/demo/image-comparison-slider/img/img-modified.jpg" id="inked" alt>
    <div id="colored"></div>
  </div>
  
</div>
<script>
    var inkbox = document.getElementById("inked-painted");
    var colorbox = document.getElementById("colored");

    var fillerImage = document.getElementById("inked");

    inkbox.addEventListener("mousemove",trackLocation,false);
    inkbox.addEventListener("touchstart",trackLocation,false);
    inkbox.addEventListener("touchmove",trackLocation,false);

    function trackLocation(e){
        var rect = fillerImage.getBoundingClientRect();
        var position = ((e.pageX - rect.left) / fillerImage.offsetWidth)*100;
        if(position <= 100){ 
        colorbox.style.width = position+"%";
    }
    }   
</script>

</body>
</html>

Vue版本实现

如下是示例代码

<template>
    <div>
        <div class="container">
            <div id="inked-painted" ref="inkedPainted">
                <img src="https://codyhouse.co/demo/image-comparison-slider/img/img-modified.jpg" id="inked" ref="inkedImg" alt>
                <div id="colored" ref="colored"></div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'drawHeiBai',
    mounted() {
        this.$refs.inkedPainted.addEventListener('mousemove',this.trackLocation,false);
        this.$refs.inkedPainted.addEventListener('touchstart',this.trackLocation,false);
        this.$refs.inkedPainted.addEventListener('touchmove',this.trackLocation,false);
    },
    methods: {
        trackLocation(e) {
            let rect = this.$refs.inkedImg.getBoundingClientRect();
         let position = ((e.pageX - rect.left) / this.$refs.inkedImg.offsetWidth)*100;
         if(position <= 100){ 
                this.$refs.colored.style.width = position+"%";
            }
        }
    }

}
</script>
<style scoped>
#inked-painted { 
  position: relative;
  font-size: 0; 
  -ms-touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

#inked-painted img { 
  width: 100%;
  height: auto; 
}

#colored { 
  background-image: url(https://codyhouse.co/demo/image-comparison-slider/img/img-original.jpg);
  position: absolute;
  top: 0; 
  left: 0;
  height: 100%;
  width: 50%;
  background-size: cover; 
}

#inked-painted:hover {
  cursor: col-resize; 
}
</style>

Vue版本实现,与原生Js的实现,是非常相似的,在Vue里面获取元素的节点, 在DOM节点上添加ref,而在获取元素时,使用this.$refs, 方法写在methods里面,其他的与原生Js没有什么区别

（能绘画,能问答）

itclanCoder

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Js实现有趣的拖动黑白对比图片特效

在有一些网站示例产品里面,为了比较处理之前和之后的一个效果对比图那么就可以使用这个特效示例效果原生Js实现<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>有趣的拖动黑白对比图片特效</title><style&gt...
复制链接

扫一扫