我有一个很长的 html 页面,里面有很多东西。我希望当用户向下滚动页面并到达 div 时出现 div 中的图像。
appartition 将通过 css 属性 transition:opacity 进行管理,但我不明白如何触发效果。
我有一个很长的 html 页面,里面有很多东西。我希望当用户向下滚动页面并到达 div 时出现 div 中的图像。
appartition 将通过 css 属性 transition:opacity 进行管理,但我不明白如何触发效果。
谢谢你的回答:)
但它只是在我的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>
它有什么问题?
例子
CSS
.imageToAppear{display:none;opacity:0}
HTML
<div id="wantedonscroll"></div>
<div id="imageToAppear"><img src="/01.png"></div>
查询
$( "#wantedonscroll" ).scroll(function() {
$("#imageToAppear").fadeIn();
});
您可以在此处对淡入淡出进行装饰是文档Jquery Fadein