先看效果鼠标移入图片中摁下向左移动 图片由灰度变为原图 向右移动原图变灰度
代码如下：尚未做优化
<style>
*{
margin:0;
padding:0;
}
#img{
380px;
height: 380px;
background: url('https://mmbiz.qpic.cn/mmbiz_jpg/CbE2tPnf9Co6ibIibPzSUkAhHbUcKP4RXV4zY0SgzydNJGvBjVEPqdBW2W4uISVpZOB7icGxv0EhBkDc20BgW9eaQ/640?wx_fmt=jpeg') center/cover;
overflow: hidden;
}
#test{
mix-blend-mode: hue;
380px;
height:380px;
position: relative;
left:0;
}
img{
height:380px;
760px;
position: relative;
left:0px;
}
</style>
</head>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<body >
<div id='img'>
<div id="test">
<img src="test.png" alt="" draggable="false">
</div>
</div>
<script>
let startX
let offleft
$('#img').mousedown((ev)=>{
startX=$(ev)[0].clientX
offleft = $('img').offset().left
$('#img').bind('mousemove',Move)
})
$('#img').mouseup(()=>{
$('#img').unbind('mousemove',Move)
})
function Move(ev){
let endX=ev.clientX
let goX = startX - endX
let go= offleft - goX
$('img').css({"left": go+"px"})
}
</script>
</body>初始这个效果想利用svg 实现或者canvas 实现，但是这2中方案后来都被否决了，因为这个灰度相当于透明的遮罩层，通过遮罩层是图片看起来变灰色，如果使用多张图片也不好实现，最终找到了这个属性<blend-mode>：
混合模式是当层重叠时计算像素最终颜色值的方法，每种混合模式采用前景和背景颜色值（分别为顶部颜色和底部颜色），执行其计算并返回颜色值。最终的可见层是对混合层中的每个重叠像素执行混合模式计算的结果。
图片灰度上层为下图：
当然直接使用背景颜色为灰色也可以实现；使用这个图片效果会跟好看一点