Javascript 如何实现悬停时的图像变换？

因此，我试图在这方面取得这样的效果

（靠近底部，您可以将鼠标悬停在图像上，当您在图像上移动时，它会显示另一个图像）

---

有什么想法吗？我的意思是，我知道它们只是叠加了两个图像，但是它们如何在悬停时使用CSS/Javascript显示远图像呢？这是我无法理解的。我尝试自己复制它，但没有成功。

因此，当鼠标悬停在线条上时，宽度会动态变化，如果您检查元素，您也可以看到这一点

$('img').on('mousemove', function(){
   var imgsrc = $(this).attr('src');
   if(imgsrc == 'img1.png'){
      $(this).attr('src','img2.png');
   }else{
      $(this).attr('src','img1.png');
   }
});

现在，在DOM结构中，被隐藏的棕色汽车位于顶部图像之前。因此，为了实现这一点，您可以完全定位棕色汽车，使其位于下一幅图像的正后方，并使用javascript或jQuery在图像或站点上使用的中间线上添加一个悬停侦听器，该侦听器将改变顶部图像（银色图像）的宽度相对于鼠标在图像块中的位置

基本上，背景图像的宽度应按百分比更改为鼠标距DIV左侧的距离，即，如果鼠标位于中间，则宽度应为50%

这是他们用来做这件事的js，就在他们的网站上（我解压缩了它）

---

您可以在不使用javascript的情况下执行此操作， JSfiddle-

只是

div:hover {
   background:url("newImage.jpg");
}

---

如果您查看html源代码（Chrome中的Ctr+Shift+I），您可以看到此元素

<div class="image-compare-tool ICT-theverge">
  <div class="image-compare-images">
    <div class="image-compare-bottom"><img src="http://cdn2.vox-cdn.com/uploads/chorus_asset/file/2455624/khyzyl-saleem-plain-copylow.0.jpg"></div>
    <div class="image-compare-top" style="width: 6.158357771261%; background-image: url(http://cdn0.vox-cdn.com/uploads/chorus_asset/file/2455620/khyzyl-saleem-plain-copylow1.0.jpeg);"><img src="http://cdn0.vox-cdn.com/uploads/chorus_asset/file/2455620/khyzyl-saleem-plain-copylow1.0.jpeg"></div>
  </div>
</div>

给你！您可以实现相同的东西，只需包含css，并通过更改img路径生成相同的html结构和类

最后是我公然从上面的答案中偷来的js：

var ImageSlider = ImageSlider || {};
ImageSlider.Public = function (t) {
    "use strict";
    var e = t(".image-compare-tool"),
        i = t(".image-compare-images"),
        o = t(".image-compare-top img"),
        a = (t(".image-compare-bottom img"), function (e) {
            e.preventDefault();
            var i, o = t(this).find(".image-compare-top"),
                a = t(this).find(".image-compare-bottom img")[0],
                n = a.getBoundingClientRect();
            i = "mousemove" == e.originalEvent.type ? (e.pageX - n.left) / a.offsetWidth * 100 : (e.originalEvent.touches[0].pageX - n.left) / a.offsetWidth * 100, 100 >= i && o.css({
                width: i + "%"
            })
        }),
        n = function () {
            i.each(function () {
                t(this).on("mousemove", a), t(this).on("touchstart", a), t(this).on("touchmove", a)
            })
        },
        m = function () {
            o.each(function () {
                var e = t(this).attr("src"),
                    i = t(this).parent();
                i.css("background-image", "url(" + e + ")")
            })
        },
        c = function () {
            n(), m()
        },
        r = function () {
            e.length > 0 && c()
        };
    r()
}(jQuery);

和工作JSFIDLE:
祝我好运…

试试这个：

var main=document.querySelector（'.main'）；
var one=document.querySelector（'.one'）；
var two=document.querySelector（'.two'）；
main.onmousemove=函数（e）{
变量宽度=e.pageX-e.currentTarget.offsetLeft；
1.style.width=宽度+px；
two.style.left=宽度+px；
}

.main{
宽度：200px；
高度：200px；
溢出：隐藏；
位置：相对位置；
}
.一{
背景图像：url（'http://www.lorempixel.com/200/200');
宽度：50%；
身高：100%；
}
.二{
背景图像：url（'http://www.lorempixel.com/200/200/sports');
位置：绝对位置；
左：50%；
右：0px；
顶部：0px；
底部：0px；
背景位置：右；
}

他肯定是在谈论底部的汽车图像，该图像具有滑动效果以显示部分img。不仅仅是直接替换悬停时的图像。@SimplyCraig-如果你不喜欢这个答案，你应该投反对票，而不是标记它。当答案甚至不是试图回答时（即，如果他们留下评论、链接或其他问题，而不是试图回答，作为回答），应该保留标记。@ArtOfWarfare我从未标记过这篇帖子，那么你在说什么？@SimplyCraig-抱歉，最近有人匿名标记了它，由于你最近留下了一条负面评论，我猜是你。@ArtOfWarfare哦，好吧，不，不是我。从未见过这样的特写。。看起来很有趣：）另请参见：好问题，因此+1I指的是滑块效果，而不仅仅是直接淡入淡出。请仔细阅读问题并参考问题中提供的链接！！我想这个问题应该问得更好。我去了提供的链接，当你将鼠标悬停在上面时，它的图片发生了变化。干得好！如果它有人类可以理解的函数名，那就太棒了！！这不是一个答案。。。这只是复制和粘贴代码从该网站到一个答案…什么是答案呢？答案是理论？你能提出什么理论？大爆炸理论？我知道我错了，因为我忘记了js。任何人都可以复制和粘贴代码，他希望重新创建代码。所以，如果他想使用他们所有的代码，我肯定他想了解发生了什么，而不是像一个没有头脑的僵尸一样复制粘贴…哈哈。。。太好笑了+我只是为了fun@SimplyCraig他为什么要重新发明轮子？你想要的唯一原因？如果他想了解东西，为什么他不能看它的来源？限制他查看网站代码的许可证在哪里？

.image-compare-tool
{
    max-width:100%;
    width:100%;
    z-index:999;
    margin:0 auto 1.5em 0;
}

.image-compare-images
{
    font-size:0;
    position:relative;
    height:100%;
    -ms-touch-action:none;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
}

.image-compare-images:hover
{
    cursor:col-resize;
}

.image-compare-images img
{
    display:block;
    height:auto;
    width:100%;
}

.image-compare-top,.image-compare-bottom
{
    z-index:0;
    height:100%;
}

.image-compare-top
{
    background-size:cover;
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:50%;
}

.image-compare-top:after
{
    background-color:#fff;
    content:'';
    height:50px;
    left:calc(100%-5px);
    top:calc(50%-25px);
    position:absolute;
    width:10px;
}

.image-compare-top img
{
    display:none;
}

.ICT-SBNation .image-compare-top:after
{
    background-color:#c52126;
}

.ICT-SBNation .image-compare-top:before
{
    background-color:#c52126;
    content:'';
    height:100%;
    left:calc(100%-2.5px);
    top:0;
    position:absolute;
    width:5px;
}

.ICT-TheVerge .image-compare-top:after
{
    background-color:#fa4b2a;
}

.ICT-TheVerge .image-compare-top:before
{
    background-color:#fa4b2a;
    content:'';
    height:100%;
    left:calc(100%-2.5px);
    top:0;
    position:absolute;
    width:5px;
}

.ICT-Polygon .image-compare-top:after
{
    background-color:#ff0052;
}

.ICT-Polygon .image-compare-top:before
{
    background-color:#ff0052;
    content:'';
    height:100%;
    left:calc(100%-2.5px);
    top:0;
    position:absolute;
    width:5px;
}

.image-compare-top:before,.ICT-Vox .image-compare-top:before
{
    background-color:#fff;
    content:'';
    height:100%;
    left:calc(100%-2.5px);
    top:0;
    position:absolute;
    width:5px;
}

var ImageSlider = ImageSlider || {};
ImageSlider.Public = function (t) {
    "use strict";
    var e = t(".image-compare-tool"),
        i = t(".image-compare-images"),
        o = t(".image-compare-top img"),
        a = (t(".image-compare-bottom img"), function (e) {
            e.preventDefault();
            var i, o = t(this).find(".image-compare-top"),
                a = t(this).find(".image-compare-bottom img")[0],
                n = a.getBoundingClientRect();
            i = "mousemove" == e.originalEvent.type ? (e.pageX - n.left) / a.offsetWidth * 100 : (e.originalEvent.touches[0].pageX - n.left) / a.offsetWidth * 100, 100 >= i && o.css({
                width: i + "%"
            })
        }),
        n = function () {
            i.each(function () {
                t(this).on("mousemove", a), t(this).on("touchstart", a), t(this).on("touchmove", a)
            })
        },
        m = function () {
            o.each(function () {
                var e = t(this).attr("src"),
                    i = t(this).parent();
                i.css("background-image", "url(" + e + ")")
            })
        },
        c = function () {
            n(), m()
        },
        r = function () {
            e.length > 0 && c()
        };
    r()
}(jQuery);