滚动网页时如何更改图像[html，javascript]答案

【问题标题】：how to change image when scrolling webpage [html, javascript]滚动网页时如何更改图像[html，javascript]
【发布时间】：2017-11-09 22:26:59
【问题描述】：

您好，我需要通过更改固定图像来修改 java 脚本。例如：加载页面时，图像将在正确的站点上。向下滚动页面图像后的下一个应更改为每个例如下一个100像素。图像需要从图像列表或类似的东西中加载。我找到了类似于此的 java 脚本。 [我需要加载自己的图像，而不是创建数字图像]

<!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>

更新：09.11.2017 好的，我管理这个代码工作。我应该做的是设置图像文件的正确路径，例如在我的情况下（“src”：“test/”+ i +“.jpg”，），其中我的图像位于“test”文件夹中，并更改图像的名称[1.jpg、2.jpg 等]。

【问题讨论】：

你的问题是......？
两件事，最好声明scrollTop out of scroll事件，都是一样的，不需要重新计算。并使用 Math.round 或 floor 更好地使用 fiexd。最后需要反思一下我们
如何代替创建数字图像加载我自己的图像？

标签： javascript html

【解决方案1】：

您可以使用原生滚动事件轻松更改图像，而无需使用 JQuery：

可以看到如何使用原生滚动事件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>

原生背景图解释here

原生getElementById解释here

此代码示例不使用 JQuery :) 只是本机 Javascript：您可以在代码中删除此行：

<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>

希望能帮到你。

【讨论】：

哈，你的链接是法语的。我以为我刚才忘记了如何阅读。
对不起，我不懂 javascript 语言（但我知道模式知道 python 语言）。在这种情况下，不知道如何解决我的问题。
嗨！抱歉法语链接，我更新了这个。我也更新了我的代码示例来自你的:)
这仍然不起作用，将要加载的图像列表放在哪里？此脚本更改“show”帧中的背景图像并读取“show”以获取图像？？
Doc Roms 感谢您的帮助，仍然您的代码对我不起作用，但由于您的提示，我设法修改了原始代码。

【解决方案2】：

我不确定，试试这个：

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

【讨论】：

它看起来对我来说是透明的，但也许我做错了什么，因为它不起作用
@ZarakiKenpachi 在使用这个之前你必须将 jquery 导入你的代码