如何在懸停時實現圖像更改？

所以我試圖在website上達到這樣的效果。如何在懸停時實現圖像更改？

（接近底部在那裏你可以將鼠標懸停在圖片，它顯示了另一個，你動過它）

任何想法？我的意思是我知道他們只是覆蓋了兩個圖像，但是他們如何使用CSS/Javascript懸停顯示遠處的圖像？這超出了我。我試圖自己複製它沒有成功。

來源

2014-11-21 user3420034

從來沒有見過這樣的特徵..看起來有趣:) – 2014-11-21 18:23:08

參見：HTTP：//德摩斯梯尼。info/blog/819/A-Before-And-After-Image-Comparison-Slide-Control-in-HTML5 – Kolban 2014-11-21 18:26:34

好問題，所以+1 – HaveNoDisplayName 2014-11-21 18:30:34

試試這個：

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

來源

2014-11-21 18:42:38

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

來源

2014-11-21 18:21:10

很確定他在談論底部有滑塊效果的汽車圖像展示img的一部分。不只是直接替換懸停的圖像。 – 2014-11-21 18:21:52

@SimplyCraig - 如果你不喜歡這個答案，你應該放棄它，而不是標記它。當答案甚至不是答案的答案時（IE，如果他們留下評論，鏈接或其他問題，而不是嘗試回答，作爲答案），標誌應該保留。 – ArtOfWarfare 2014-11-21 18:46:52

@ArtOfWarfare我從未標記過這篇文章，所以你在說什麼？ – 2014-11-21 18:49:57

所以發生了什麼事是，當鼠標懸停在線條，寬度是動態變化的，如果你檢查的元素，你可以看到這一點。

現在，在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);

來源

2014-11-21 18:21:33 elmir

幹得好！只有當它具有人類可理解的函數名稱時，它纔會很棒！ – 2014-11-21 18:28:14

-2

你可以做到這一點沒有JavaScript的，的jsfiddle - http://jsfiddle.net/k4915wwm/

只是......

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

來源

2014-11-21 18:24:13

我指的是滑塊效果，而不僅僅是直接淡出。 – user3420034 2014-11-21 18:24:53

請仔細閱讀問題，並參考問題中提供的鏈接請！ – 2014-11-21 18:26:17

我想這個問題應該被問得更好。我去了提供的鏈接，它只是有一些東西，當你徘徊時，圖像發生了變化。 – 2014-11-22 03:22:41

如果你看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; 
}

這裏wea！您可以通過只包括CSS，使相同的HTML結構和教學班，只是改變IMG路徑實現相同的東西...

最後，我肆無忌憚地從答案偷上面的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/
我的好運氣......

來源

2014-11-21 18:30:31 RussianVodka

這不是一個答案...這只是從該網站複製並粘貼代碼到一個答案.... – 2014-11-21 18:31:12

什麼是答案呢？答案是理論？你可以建議什麼理論？大爆炸的理論？而且我知道我錯了，因爲我忘了js。 – RussianVodka 2014-11-21 18:33:00

任何人都可以複製和粘貼代碼，他希望它被重新創建。所以確定他是否想要使用他可能擁有的所有代碼，但是我確定他想知道發生了什麼，而不是像僵硬的殭屍一樣複製和粘貼...... – 2014-11-21 18:36:51

如何在懸停時實現圖像更改？

回答

相關問題