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

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

那么就可以使用这个特效

示例效果

原生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没有什么区别