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

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

那么就可以使用这个特效

示例效果

原生Js实现

代码语言：javascript

复制

<!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(&#34;inked&#34;);

inkbox.addEventListener(&#34;mousemove&#34;,trackLocation,false);
inkbox.addEventListener(&#34;touchstart&#34;,trackLocation,false);
inkbox.addEventListener(&#34;touchmove&#34;,trackLocation,false);

function trackLocation(e){
    var rect = fillerImage.getBoundingClientRect();
    var position = ((e.pageX - rect.left) / fillerImage.offsetWidth)*100;
    if(position &lt;= 100){ 
    colorbox.style.width = position+&#34;%&#34;;
}
}   

</script>
</body>

</html>

Vue版本实现

如下是示例代码

代码语言：javascript

复制

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