用户滚动时显示图像

时间:2013-11-14 11:35:55

标签: javascript css

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

将使用css属性转换管理appartition:opacity 但我不明白如何触发效果。

2 个答案:

答案 0 :(得分:0)

例证

CSS

.imageToAppear{display:none;opacity:0}

HTML

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

JQUERY

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

您可以通过文档Jquery Fadein

来淡化淡入淡出事件

答案 1 :(得分:0)

谢谢你的回答:)

但它只是在我的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>

它出了什么问题?