<div id="smiley">
<div id="star">
<img src="inc/img/heks.png" class="star">
<img src="inc/img/impo.png" class="star">
<img src="inc/img/angst.png" class="star">
</div>
</div>
#smiley{
margin: 50px auto 80px;
width: 1132px;
height: 300px;
}
#smiley #star{
display: none;
float: left;
height: 300px;
width: 1132px;
}
#smiley #star img.star{
display: block;
float: left;
width: 300px;
margin: 50px 38px 0px;
}
当我向下滚动到它们时,我需要让图像淡出可见。
我希望你能理解这个问题。
最佳答案
Demo .. Source code
如果你想只在图片出现在浏览器窗口时显示图片..而不影响它们的加载..
试试这个,让图像的visibility隐藏,然后当图像出现在浏览器..
所以 .. 在您的CSS 中:
<style>
.star {
visibility: hidden;
}
.fadeIn {
-webkit-animation: animat_show 0.8s;
animation: animat_show 0.8s;
visibility: visible !important;
}
@-webkit-keyframes animat_show{
0%{opacity:0}
100%{opacity:1}
}
</style>
然后加载jQuery库
<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
并在您的 JavaScript 中:
<script>
function showImages(el) {
var windowHeight = jQuery( window ).height();
$(el).each(function(){
var thisPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (topOfWindow + windowHeight - 200 > thisPos ) {
$(this).addClass("fadeIn");
}
});
}
// if the image in the window of browser when the page is loaded, show that image
$(document).ready(function(){
showImages('.star');
});
// if the image in the window of browser when scrolling the page, show that image
$(window).scroll(function() {
showImages('.star');
});
</script>
希望这对你有帮助..
关于javascript - 滚动时如何使图像淡出可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27747970/