Javascript 当用户滚动时使图像显示_Javascript_Css

Javascript 当用户滚动时使图像显示

javascript css

Javascript 当用户滚动时使图像显示,javascript,css,Javascript,Css,我有一个很长的html页面，里面有很多东西。我希望当用户向下滚动页面并到达div时，div中出现一个图像该装置将通过css属性转换：不透明度进行管理但我不明白如何触发这种效果。例如 CSS HTML 您可以在文档中对淡入事件进行成本计算谢谢您的回答：）但它在我的html页面中不起作用这是我的档案： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>tes

我有一个很长的html页面，里面有很多东西。我希望当用户向下滚动页面并到达div时，div中出现一个图像

该装置将通过css属性转换：不透明度进行管理但我不明白如何触发这种效果。

例如

CSS

HTML

您可以在文档中对淡入事件进行成本计算

谢谢您的回答：）

但它在我的html页面中不起作用

这是我的档案：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
#imageToAppear{display:none;opacity:0}
</style>
</head>

<body>
<div>
<p>Lorem ispum .... and a lot of things in order to have something to scroll</p>
</div>
<div id="wantedonscroll"></div>
<div id="imageToAppear"><img src="test.png"></div>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("#wantedonscroll").scroll(function() {
 $("#imageToAppear").fadeIn();
});
</script>
</body>
</html>


测试
#imageToAppear{显示：无；不透明度：0}
奥勒姆·伊斯普姆。。。。还有很多东西是为了有东西可以滚动
$（“#wantedonscroll”）.滚动（函数（）{
$（“#imageToAppear”）.fadeIn（）；
});

有什么问题吗？

尝试：搜索“延迟加载”。

<div id="wantedonscroll"></div>
<div id="imageToAppear"><img src="/01.png"></div>

$( "#wantedonscroll" ).scroll(function() {
 $("#imageToAppear").fadeIn();
});

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
#imageToAppear{display:none;opacity:0}
</style>
</head>

<body>
<div>
<p>Lorem ispum .... and a lot of things in order to have something to scroll</p>
</div>
<div id="wantedonscroll"></div>
<div id="imageToAppear"><img src="test.png"></div>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("#wantedonscroll").scroll(function() {
 $("#imageToAppear").fadeIn();
});
</script>
</body>
</html>