Question

所以我试图在website上实现这样的效果。

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

有什么想法吗？我的意思是我知道他们只是覆盖了这两个图像，但他们如何在悬停时使用CSS / Javascript显示远端图像？这超出了我的范围。我试过自己复制它没有成功。

Answer 1

试试这个：

var main = document.querySelector('.main');
var one = document.querySelector('.one');
var two = document.querySelector('.two');

main.onmousemove = function (e) {
    var width = e.pageX - e.currentTarget.offsetLeft;
    one.style.width = width + "px";
    two.style.left = width + "px";
}

.main {
    width: 200px;
    height: 200px;
    overflow: hidden;
    position: relative;
}
.one {
    background-image: url('http://www.lorempixel.com/200/200');
    width: 50%;
    height: 100%;
}
.two {
    background-image: url('http://www.lorempixel.com/200/200/sports');
    position: absolute;
    left: 50%;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-position: right;
}

<div class="main">
  <div class="one"></div>
  <div class="two"></div>
</div>

<强> Working Fiddle

Answer 2

所以发生了什么，当鼠标悬停在线上时，宽度会动态变化，如果你检查元素，你也可以看到它。

现在，在DOM结构中，棕色汽车，被隐藏的汽车位于顶部图像之前。所以要实现这一点，你可以绝对定位棕色汽车，所以它就在下一个图像后面，并且使用javascript或jQuery添加一个用于悬停的监听器，在图像或网站上使用的中间线上，这将改变顶部图像（银色图像）相对于鼠标在图像块中的位置的宽度。

基本上，背景图像的宽度应按百分比变化，以鼠标距离DIV左边的距离为百分比，即如果鼠标位于中间，则宽度应为50％。

以下是他们用来做它的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);

Answer 3

如果您查看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。

.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;
}

这里有一个！您可以通过仅包含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);

工作的JSFiddle：http://jsfiddle.net/9gf59k00/
祝我好运......

Answer 4

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

Answer 5

你可以不用javascript做到这一点， JSfiddle - http://jsfiddle.net/k4915wwm/

只是...

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

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

5 个答案: