我的网页上是否有可能在进入页面时出现图像，然后在用户滚动后消失？
基本上我想要一个指向我的内容一侧的箭头指向下方，然后我希望它在用户滚动后消失。
这可能只使用 CSS 还是 javaScript 工作？
问问题
140 次
3 回答
3
这是一个快速的 jQuery 片段
$(function() {
var $img = $('#myImg');
$(document).on('scroll', function() {
$img.hide();
});
});
更新- 要仅在未滚动到顶部时隐藏，请使用以下命令：
$(function() {
var $img = $('#myImg');
$(document).on('scroll', function() {
$img.toggle(!$(this).scrollTop());
});
});
演示：http: //jsfiddle.net/seancannon/XB2r6/
于 2013-09-13T15:54:27.553 回答
1
如果您使用的是纯 javascript，请尝试以下操作：
var img = document.getElementById('ImageId');
window.onscroll = function (e)
{
img.style.display = 'none';
}
这是完整的代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<img src="http://placekitten.com/200/300" id="ImageId" alt="an image" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam velit nulla, ullamcorper et consectetur sit amet, consequat ut velit. Vestibulum in placerat elit, vitae convallis lorem. In pretium massa turpis, at cursus odio rutrum a. Nullam eu convallis dui. Fusce faucibus pharetra libero a aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam venenatis, massa vel feugiat rhoncus, sem lectus venenatis nunc, quis elementum eros dui vel lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque sit amet eros id ligula vestibulum interdum eget sed arcu. In ornare adipiscing orci. Phasellus et pulvinar dui. Morbi pharetra hendrerit sapien, sed mattis eros tincidunt non. Aliquam accumsan augue lorem, ac rutrum nunc commodo quis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam velit nulla, ullamcorper et consectetur sit amet, consequat ut velit. Vestibulum in placerat elit, vitae convallis lorem. In pretium massa turpis, at cursus odio rutrum a. Nullam eu convallis dui. Fusce faucibus pharetra libero a aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam venenatis, massa vel feugiat rhoncus, sem lectus venenatis nunc, quis elementum eros dui vel lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque sit amet eros id ligula vestibulum interdum eget sed arcu. In ornare adipiscing orci. Phasellus et pulvinar dui. Morbi pharetra hendrerit sapien, sed mattis eros tincidunt non. Aliquam accumsan augue lorem, ac rutrum nunc commodo quis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam velit nulla, ullamcorper et consectetur sit amet, consequat ut velit. Vestibulum in placerat elit, vitae convallis lorem. In pretium massa turpis, at cursus odio rutrum a. Nullam eu convallis dui. Fusce faucibus pharetra libero a aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam venenatis, massa vel feugiat rhoncus, sem lectus venenatis nunc, quis elementum eros dui vel lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque sit amet eros id ligula vestibulum interdum eget sed arcu. In ornare adipiscing orci. Phasellus et pulvinar dui. Morbi pharetra hendrerit sapien, sed mattis eros tincidunt non. Aliquam accumsan augue lorem, ac rutrum nunc commodo quis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam velit nulla, ullamcorper et consectetur sit amet, consequat ut velit. Vestibulum in placerat elit, vitae convallis lorem. In pretium massa turpis, at cursus odio rutrum a. Nullam eu convallis dui. Fusce faucibus pharetra libero a aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam venenatis, massa vel feugiat rhoncus, sem lectus venenatis nunc, quis elementum eros dui vel lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque sit amet eros id ligula vestibulum interdum eget sed arcu. In ornare adipiscing orci. Phasellus et pulvinar dui. Morbi pharetra hendrerit sapien, sed mattis eros tincidunt non. Aliquam accumsan augue lorem, ac rutrum nunc commodo quis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam velit nulla, ullamcorper et consectetur sit amet, consequat ut velit. Vestibulum in placerat elit, vitae convallis lorem. In pretium massa turpis, at cursus odio rutrum a. Nullam eu convallis dui. Fusce faucibus pharetra libero a aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam venenatis, massa vel feugiat rhoncus, sem lectus venenatis nunc, quis elementum eros dui vel lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque sit amet eros id ligula vestibulum interdum eget sed arcu. In ornare adipiscing orci. Phasellus et pulvinar dui. Morbi pharetra hendrerit sapien, sed mattis eros tincidunt non. Aliquam accumsan augue lorem, ac rutrum nunc commodo quis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam velit nulla, ullamcorper et consectetur sit amet, consequat ut velit. Vestibulum in placerat elit, vitae convallis lorem. In pretium massa turpis, at cursus odio rutrum a. Nullam eu convallis dui. Fusce faucibus pharetra libero a aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam venenatis, massa vel feugiat rhoncus, sem lectus venenatis nunc, quis elementum eros dui vel lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque sit amet eros id ligula vestibulum interdum eget sed arcu. In ornare adipiscing orci. Phasellus et pulvinar dui. Morbi pharetra hendrerit sapien, sed mattis eros tincidunt non. Aliquam accumsan augue lorem, ac rutrum nunc commodo quis.</p>
<script>
var img = document.getElementById('ImageId');
window.onscroll = function (e)
{
img.style.display = 'none';
}
</script>
</body>
</html>
于 2013-09-13T15:57:55.910 回答
0
您需要使用 javascript 并为您的图像设置一个滚动事件处理程序，使其在触发滚动事件时消失。
于 2013-09-13T15:52:21.847 回答