向下滚动网页时如何更改图片？

Question

I am working on a website where a picture is in a fixed position. 我正在一个图片固定的网站上工作。 The picture should change when scrolling. 滚动时图片应改变。 I have 6 pictures in my img folder, the first picture is implemented in my index file. 我的img文件夹中有6张图片，第一张图片在索引文件中实现。 Now I want the picture changes 5 times for example: I am scrolling down and at 20% PIC1 changes to PIC2. 现在，我希望图片发生5次更改，例如：我向下滚动，然后将PIC1更改为PIC2的比例为20％。 And then at 40% changes PIC2 to PIC3 and so on. 然后在40％时将PIC2更改为PIC3，依此类推。

I tried javascript but failed. 我尝试使用JavaScript，但失败了。


var onScrollHandler = function() {
  var newImageUrl = Pic1.svg;
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 100) {
     newImageUrl = "pic2.svg"
  }
  if (scrollTop > 200) {
     newImageUrl = "pic3.svg"
  }
  if (scrollTop > 300) {
     newImageUrl = "pic4.svg"
  }
  if (scrollTop > 400) {
     newImageUrl = "pic5.svg"
  }
  if (scrollTop > 500) {
     newImageUrl = "pic6.svg"
  }
  Pic1.svg = newImageUrl;
};
object.addEventListener ("scroll", onScrollHandler);

I hope it is understandable enough and someone can help me until tomorrow. 我希望它是可以理解的，有人可以帮助我直到明天。 Have a nice day and thank you anyways! 祝你有美好的一天，还是谢谢你！

Answer 1

Here's some code that approximates your requirements. 这是一些近似您的要求的代码。 You'll probably need to test it properly before you use it in any production code, but hopefully, it'll point you in the right direction. 在任何生产代码中使用它之前，您可能需要先对其进行正确的测试，但希望它会为您指明正确的方向。

All the magic is in the javascript code. 所有的魔力都在javascript代码中。

 // The available scroll space in the browser window is evaluated and // assigned to h here var h = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight) - window.innerHeight; // h is divided into 5 equals parts var diff = h / 5; var processing = false; // variable to keep track of how far the user has scrolled so image can be changed var diff_tracker = 0; // variable to keep track of the current image being displayed var current_image_index = 1; var last_known_scroll_position = 0; // this function changes the image displayed depending the scroll position function changeImage(scroll_pos) { if (scroll_pos === 1) { document.getElementById("image").src = "https://www.w3schools.com/html/pic_trulli.jpg"; } else if (scroll_pos === 2) { document.getElementById("image").src = "https://www.w3schools.com/Html/img_girl.jpg"; } else if (scroll_pos === 3) { document.getElementById("image").src = "https://www.w3schools.com/css/img_5terre_wide.jpg"; } else if (scroll_pos === 4) { document.getElementById("image").src = "https://www.w3schools.com/w3css/img_snowtops.jpg"; } else if (scroll_pos === 5) { document.getElementById("image").src = "https://www.w3schools.com/w3css/img_nature.jpg"; } } // on scroll, this listener fires and updates the image being displayed as required window.addEventListener('scroll', function(e) { var scroll_position = window.scrollY; if (!processing) { window.requestAnimationFrame(function() { if (last_known_scroll_position === 0) { last_known_scroll_position = scroll_position; } else { diff_tracker += scroll_position - last_known_scroll_position; if (diff_tracker >= 0) { while (diff_tracker >= diff) { diff_tracker -= diff; current_image_index++; changeImage(current_image_index); } } else { while (diff_tracker < -diff) { diff_tracker += diff; current_image_index--; changeImage(current_image_index); } } } last_known_scroll_position = scroll_position; processing = false; }); processing = true; } }); function recalculate() { h = Math.max( document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight) - window.innerHeight; diff = h / 5; } // if the window is resized, the scrolling height and diff variable are recalculated window.onresize = recalculate;

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> div.sticky { position: -webkit-sticky; position: sticky; top: 0; padding: 70px; font-size: 20px; } </style> </head> <body> <h2>Scroll Down to See the Effect</h2> <div class="sticky"><img id="image" width=300 height=300 src="https://www.w3schools.com/html/pic_trulli.jpg" /> </div> <h2>Some random text to enable scroll..</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fst hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.</p> </body> </html>

Answer 2

You can change the src of your image tag in javascript when certain amount of screen is scrolled. 当滚动一定数量的屏幕时，可以在javascript中更改图片标签的src 。 Try running this example by expanding the snippet in full screen 尝试通过全屏展开代码段来运行此示例

 function change() { var percent = (document.documentElement.scrollTop || document.body.scrollTop) / ((document.documentElement.scrollHeight || document.body.scrollHeight) - document.documentElement.clientHeight) * 100; var image = document.getElementById("img"); if (percent < 20) { image.src = "https://www.w3schools.com/css/img_mountains.jpg"; } else if (percent < 40) { image.src = "https://www.w3schools.com/Html/img_girl.jpg"; } else if (percent < 60) { image.src = "https://www.w3schools.com/css/img_5terre_wide.jpg"; } else if (percent < 80) { image.src = "https://www.w3schools.com/w3css/img_snowtops.jpg"; } else if (percent < 90) { image.src = "https://www.w3schools.com/w3css/img_nature.jpg"; } }

 body { font-size: 32px; } #left { float: left; width: 60%; } #stick { position: fixed; left: 60%; float: right; width: 35%; }

 <body onscroll="change()"> <div id="left"> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt, esse laborum omnis nisi quo enim corrupti dolorum dicta, tenetur error perferendis perspiciatis dolor nulla, consequuntur numquam totam commodi aliquam consequatur rem quos? Quam vel, veniam deleniti maiores sapiente aliquid perferendis distinctio ut earum libero ipsum consectetur sint ex esse voluptate maxime molestias doloribus. Obcaecati quo non animi quas expedita. Doloribus aliquam eos ut perferendis inventore et ratione nostrum fugiat dolore libero! Eveniet quam quidem natus placeat veniam sint, nihil aut tenetur repellat pariatur, sunt eos soluta, neque explicabo ipsam corrupti nisi. Magnam facilis neque tempora ducimus doloribus explicabo minima natus. </p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae soluta esse, voluptatem ad dolorem nisi, voluptatibus error repudiandae similique tempora adipisci sint doloremque iusto amet laudantium atque, animi eaque impedit corrupti nesciunt blanditiis dolorum quo. Quae aperiam autem excepturi commodi, accusantium sed tempora inventore, dolore, at ut eligendi culpa beatae vel. Cumque impedit quod earum commodi doloremque optio culpa ea veritatis sed delectus fugiat nemo, corporis dolore officiis quaerat unde reiciendis, debitis ratione ipsa obcaecati voluptates. Ducimus doloremque id quis accusamus enim, eligendi accusantium nam inventore itaque deleniti quidem error aut? Ea ipsum velit aliquid commodi voluptas distinctio officiis, similique facere ratione dolores corporis, architecto dolore ab amet quia expedita hic quam! Blanditiis suscipit fugiat esse nemo, modi facere nesciunt!</p> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa rerum ex consequuntur enim repellendus repellat, ratione eveniet illo libero voluptate vel, reprehenderit voluptas quis obcaecati aliquam inventore! Provident alias quos praesentium consequatur doloribus nemo rerum quod autem totam, suscipit molestiae repellendus perferendis placeat sapiente vero tempora aliquam nihil quae? Praesentium minima perferendis voluptatibus laboriosam natus molestiae, maxime aperiam, voluptatem adipisci aliquid itaque id. Incidunt assumenda, consectetur odio temporibus doloribus eaque illo fugit deserunt, eos repudiandae expedita porro iste, facilis quaerat iure blanditiis iusto sapiente?</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos quod dolorum maiores dignissimos minima! Obcaecati, perspiciatis natus. Tempore obcaecati esse ad veniam earum alias, illum voluptate et illo sit eum repellat dolorum fugit at, totam architecto id eaque corrupti.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo atque, non eius repellat voluptate id suscipit. Quod at facere consequuntur possimus, impedit doloremque dolorem accusamus recusandae veniam ipsum eum cumque. Quas in repudiandae tenetur harum porro. Maxime iure dolor, repudiandae deleniti quidem ipsum ipsam animi sequi non amet repellat deserunt. Provident labore eveniet nulla aliquid vero consequatur quis quasi quas? Esse rerum perferendis cupiditate, voluptates voluptatibus magnam facilis quisquam molestias delectus, sequi officia dolor iusto nostrum repudiandae laboriosam? </p> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut perspiciatis dolor nesciunt et beatae vel architecto, officiis reiciendis assumenda sapiente laboriosam in, tenetur corrupti quam perferendis minus hic? Dolorum totam fuga accusamus corrupti? Quo inventore maiores dolorem impedit tempora veniam, totam asperiores eius architecto voluptatem dolor temporibus ratione rerum. Facilis nemo recusandae optio unde amet, ipsam harum delectus, alias aliquam, ipsa sed fugiat illo numquam repellendus aperiam? </p> </div> <div id="stick"> <h1>Fixed Image</h1> <img src="https://www.w3schools.com/css/img_mountains.jpg" id="img" width="100%" height="100%"> </div> </body>

向下滚动网页时如何更改图片？

问题描述

2 个解决方案

解决方案1
0 2019-09-15 13:21:40

解决方案2
0 2019-09-15 16:39:45

向下滚动网页时如何更改图片？

问题描述

2 个解决方案

解决方案1 0 2019-09-15 13:21:40

解决方案2 0 2019-09-15 16:39:45

解决方案1
0 2019-09-15 13:21:40

解决方案2
0 2019-09-15 16:39:45