用戶滾動時顯示圖像

Question

我的HTML頁面很長，里面有很多東西。 我希望當用戶向下滾動頁面並到達div時出現div中的圖像。

該公寓將通過css屬性transition：opacity進行管理，但是我不知道如何觸發效果。

Answer 1

例子

的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

Answer 2

感謝您的回答:)

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

怎么了

用戶滾動時顯示圖像

問題描述

2 個解決方案

解決方案1
0 2013-11-14 11:52:12

解決方案2
0 2013-11-15 08:59:46

用戶滾動時顯示圖像

問題描述

2 個解決方案

解決方案1 0 2013-11-14 11:52:12

解決方案2 0 2013-11-15 08:59:46

解決方案1
0 2013-11-14 11:52:12

解決方案2
0 2013-11-15 08:59:46