wie man Bild beim Scrollen der Webseite ändert [html, javascript]

Hi ich muss Java-Skript ändern, das durch das Ändern des örtlich festgelegten Bildes ändert. In zum Beispiel: wenn die Seite geladen ist, wird das Bild von der rechten Seite angezeigt. Nach dem Scrollen nach unten sollte das Seitenbild für jedes z. 100px. Bilder müssen aus der Bildliste oder ähnlichem geladen werden. Ich habe Java-Skript gefunden, die etwas Ähnliches machen. [Statt Bilder von Zahlen zu schaffen Ich brauche meine eigenen Bilder laden]wie man Bild beim Scrollen der Webseite ändert [html, javascript]

<!DOCTYPE html> 
<html> 
<head> 
<style> 
html,body { 
    height: 400%; 
    background: white; 
    width: 100%; 
} 
.show { 
    width: 100px; 
    height: 100px; 
    position: fixed; 
    top: 300px; 
    right: 20px; 
    background: lime; 
} 
</style> 
</head> 


<body> 
<img class="show" alt="0" src="img0.jpg" /> 
Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,Text 

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> 
</script> 
<script type="text/javascript" src="jquery.easing.1.3.js"></script> 
<script type="text/javascript">  

var lastI 
$(window).scroll(function() { 
    var scrollTop = $(this).scrollTop() 
    console.log(scrollTop) 
    var i = (scrollTop/10).toFixed(0) 
    if (i !== lastI) 
     $(".show").attr({ 
      "src": "img" + i + ".jpg", 
      "alt": i 
     }) 
    lastI = i 
}) 

</script> 

</body> 
</html>

Update: 2017.09.11 Ok, ich schaffe dieser Code zu arbeiten. Was sollte ich tun, um den richtigen Pfad zu den Bilddateien einzurichten, wie in meinem Fall ("src": "test /" + i + ".jpg"), wo meine Bilder im "test" -Ordner sind, und die Namen der Bilder ändern [1.jpg, 2.jpg und so weiter].

Quelle

2017-11-08 Zaraki Kenpachi

Und deine Frage ist ...? – Savado

zwei Dinge, ist es besser, ScrollTop aus Scroll-Ereignis zu deklarieren, ist immer das Gleiche und keine Notwendigkeit, neu zu berechnen. Und benutze Math.round oder floor besser, um fiexd zu benutzen. Diese letzte Notwendigkeit, eine Reflexion von uns zu machen –

Wie statt Bilder von Zahlen zu erstellen laden meine eigenen Bilder? –

Ich bin nicht sicher, versuchen Sie dieses:

$(document).scroll(function() { 
    var y = $(this).scrollTop(); 
    if (y > 100) { 
     $('.Classname').css("background-image","../images/image.png"); 
    } else { 
     $('.Classname').css("background-image","none"); 
    } 
});

Quelle

2017-11-08 10:28:42

Es sieht transparent für mich aus, aber vielleicht mache ich etwas falsch, weil es nicht funktioniert –

@ZarakiKenpachi bevor Sie dies verwenden, müssen Sie jquery in Ihren Code importieren –

Sie können Ihr Bild mit der gebürtigen Scroll-Ereignis easyli ändern, ohne die Verwendung von JQuery:

Sie können sehen, wie nativer Scroll-Ereignis verwenden here

<body> 
    <!-- This is an image with a 'show' id --> 
    <img id="show" alt="0" src="img0.jpg" /> 

    <script type="text/javascript"> 
     /* this capture the `scroll event`*/ 
     window.addEventListener('scroll', function(e) { 
      /* This generate a image name in case with scroll position (ex img1.jpg) */ 
      let bgImage = 'img' + (window.scrollY/10).toFixed(0) + '.jpg'; 
      /* This specify the path where are your images list */ 
      let bgImagePath = '../images/' + bgImage; 

      /* This get your element (img) with id `show` and change this background image by the path include in `bgImagePath` variable */ 
      document.getElementById('show').style.backgroundImage = bgImagePath; 
     }); 
    </script> 
</body>

indiaHinterGrundBild erklären here

india getElementByld erklären here

Diese Probe von Code nicht JQuery verwenden :) Nur nativer Javascript: Sie van diese Zeilen im Code entfernen:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> 
</script> 
<script type="text/javascript" src="jquery.easing.1.3.js"></script>

Hoffe, dass ich Ihnen helfen.

Quelle

2017-11-08 10:46:20

Ha, Ihr Link ist in Französisch. Ich dachte, ich hätte gerade dann das Lesen vergessen. –

Tut mir leid, weiß nicht, JavaScript-Sprache (aber ich erkenne Schema kennen Python-Sprache). In diesem Fall wissen Sie nicht, wie Sie dies auf mein Problem anwenden können. –

Hallo! Entschuldigung für den französischen Link, ich aktualisiere dies. Und ich aktualisiere auch meine Beispielcode von Ihrem :) –

wie man Bild beim Scrollen der Webseite ändert [html, javascript]

Antwort

Verwandte Themen