javascript - 使用 CSS 逐渐改变图像(删除过渡)

Question

我有一个奇怪的问题。这很奇怪，因为我真的很难解释我的意思。我意识到，我可能会得到一些负面反馈，但没有其他地方可以问。

我正在寻找的是一种 CSS(如果不可能，也可以是 JavaScript)在悬停时逐渐改变图像的技术。我不希望它淡出或立即更改整个图像。我想要的是有一个图像，当我用鼠标悬停它时，图像的悬停部分会发生变化，我悬停我的图像越多，我就越能看到另一个图像。我希望这个描述足够了。抱歉，我不知道这个怎么称呼。

我做了一些与我在这里想的类似的东西(https://jsbin.com/xurokogicu/edit?html,css,output) 但这是滚动的，我希望当我用鼠标悬停图像时发生这种情况。

希望你明白我在这里说的一切，

提前致谢!

编辑: 这里有两张图片可以更好地理解我的想法。黑线表示该线上的某处(垂直)是鼠标光标。如果我将鼠标悬停在左侧，黑线会向左移动并显示其他图像的一部分。所以基本上首先是这张猴子图片，然后，无论我悬停在哪里，都会出现那条黑线，显示右侧的其他图片。

编辑2: 伙计们，我们找到了一个活生生的例子来说明我的意思:jpegmini.com 但是有不同的图像。 现在我要问的是我该怎么做，或者它怎么称呼，因为我的问题没有答案。 我还会为正在搜索此内容的其他人更改标题名称。

编辑3: 我们找到了答案，这正是我要找的:

JS

var ctx = c.getContext("2d"),
img = new Image();         // image to show

img.onload = start;
img.src = "link to img";

function start() {
  c.onmousemove = function(e) {
    var r = c.getBoundingClientRect(),
        x = e.clientX - r.left;
    ctx.clearRect(0, 0, c.width, c.height); 
    ctx.drawImage(img, 0, 0, x, c.height,  0, 0, x, c.height); 
    ctx.fillRect(x, 0, 5, c.height); 
  };

}

CSS

#c {
  background: url(link to other img); 
  background-size: cover;
  }

HTML

<canvas id=c width=620 height=400></canvas>

Answer 1

我会为此使用 Canvas + CSS。这是因为它可以让您完全控制鼠标移动，并提供一种简单的方法来引入条形图和不同类型的划像(对 Angular 线、自定义等)(如果您以后需要的话)。

• 将背景图像定义为 canvas 元素的 CSS
• 在剪裁到鼠标位置的顶部图像中绘制

例子

var ctx = c.getContext("2d"),
    img = new Image();         // image to show

img.onload = start;
img.src = "//i.imgur.com/mS4R13a.png";

function start() {
  c.onmousemove = function(e) {
    var r = this.getBoundingClientRect(),
        x = e.clientX - r.left;
    ctx.clearRect(0, 0, c.width, c.height);                     // clear canvas for new draw
    ctx.drawImage(img, 0, 0, x, c.height,  0, 0, x, c.height);  // clip and draw image to x
    ctx.fillRect(x, 0, 5, c.height);                            // draw a thin black bar
  };
}

#c {
  background: url(//i.imgur.com/GQ6xVAT.png); 
  background-size: cover;
  }

<canvas id=c width=620 height=400></canvas>