更改滾動位置上的圖像

我想更改某個滾動位置上的圖像。例如：更改滾動位置上的圖像

滾動100像素顯示img1.jpg

滾動200像素顯示img2.jpg

滾動300像素顯示img3.jpg

Here我發現了一個例子我的意思。

任何想法？

2014-06-16 l00per

可能重複[如何更改我的滾動使用CSS的背景？]（http://stackoverflow.com/questions/17586162/how-do-i-change-my-background-on-scroll-using- CSS） – Tanner

您可以使用onScroll事件來偵聽滾動，檢查滾動條的位置，並使圖像更改或任何您的心臟需求。你可以閱讀更多關於onScroll事件here。一個基本的代碼將是這樣的：

var onScrollHandler = function() { 
    var newImageUrl = yourImageElement.src; 
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
    if (scrollTop > 100) { 
    newImageUrl = "img1.jpg" 
    } 
    if (scrollTop > 200) { 
    newImageUrl = "img2.jpg" 
    } 
    if (scrollTop > 300) { 
    newImageUrl = "img3.jpg" 
    } 
    yourImageElement.src = newImageUrl; 
}; 
object.addEventListener ("scroll", onScrollHandler);

當然yourImageElement應該與你要更改的圖像元素所取代。

如果您有jQuery可用，則可以使用.scroll()方法代替事件偵聽器，並使用.scrollTop()獲取滾動條位置。

此外，你可能想看看一些滾動/ paralex庫，如skrollr。

來源

2014-06-16 09:19:33 Lior

所以我只是回答這個舊線程，因爲我試圖在我的網站上實現同樣的事情，但我發現它有點難以實現它，所以我做了我自己的功能，它更容易實現和理解，但有點馬車，例如：如果用戶使用滾動條代替鼠標滾輪的形象不會改變，希望它可以幫助你：

<html> 
 

 
<head> 
 
    <script> 
 
    function f() { 
 
     t1.src = "https://igu3ss.files.wordpress.com/2012/09/chess_king_4.jpg" 
 
     t1.height = "319" 
 
     t1.width = "330" 
 
    } 
 

 
    function f2() { 
 
     t1.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Chess_piece_-_Black_queen.JPG/130px-Chess_piece_-_Black_queen.JPG" 
 
     t1.height = "319" 
 
     t1.width = "330" 
 
    } 
 

 
    function f3() { 
 
     t1.src = "https://asmoodle.asmadrid.org/blog/s16240/wp-content/uploads/sites/56/2014/12/protourney_knight_black_400.jpg" 
 
     t1.height = "244" 
 
     t1.width = "330" 
 
    } 
 

 
    function f4() { 
 
     t1.src = "https://thumbs.dreamstime.com/x/chess-knight-white-background-29811348.jpg" 
 
     t1.height = "244" 
 
     t1.width = "350" 
 
    } 
 

 
    function f5() { 
 
     t1.src = "http://cdn.craftsy.com/upload/3703789/pattern/115774/full_7439_115774_ChessKnightMachineEmbroideryDesign_1.jpg" 
 
     t1.height = "319" 
 
     t1.width = "350" 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div align="center" style="position: fixed; z-index: 20; left:38.5%; top:200"> 
 
    <img src="no.png" height="319" width="330" name="t1"> 
 
    </div> 
 
    </div> 
 
    <div class="container" onmouseover="f3()" style="padding:0; margin:0; width:100%;"> 
 
    <img src="https://pixabay.com/static/uploads/photo/2016/01/11/22/05/background-1134468_960_720.jpg" width="100%"> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    <div class="container" onmouseover="f4()" style="padding:0; margin:0; width:100%;"> 
 
    <img src="https://image.freepik.com/free-photo/lens-flare-abstract-backgound_21276999.jpg" width="100%"> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    <div class="container" onmouseover="f5()" style="padding:0; margin:0; width:100%;"> 
 
    <img src="https://image.freepik.com/free-photo/lens-flare-abstract-backgound_21276999.jpg" width="100%"> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    <div class="container" onmouseover="f()" style="padding:0; margin:0; width:100%;"></div> 
 
</body></html>

乾杯！ Ha [ppy]編碼。

來源

2016-09-07 15:37:19

更改滾動位置上的圖像

回答

相關問題