只能用javascript实现
如jquery的lazyload插件能实现图片的延迟载入
原理:将html中所有img标签的src属性都替换空，把src的存到自定义的属性中，当页面滚动到img标签位置时再载入进来。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>下拉菜单</title>
<style type="text/css">
*{margin:0padding:0}
#nav{width:200pxmargin:50px}
#nav h3{ cursor:pointerline-height:30pxheight:30pxbackground-color:#000000color:#fff}
#nav a{display:blockline-height:24pxcolor:#666666}
#nav a:hover{background-color:#eeecolor:#000}
#nav div{display:noneborder:1px solid #000border-top:none}
</style>
<script type="text/javascript">
function $(id){return document.getElementById(id)}
window.onload = function(){
$("nav").onclick = function(e){
var src = e?e.target:event.srcElement
if(src.tagName == "H3"){
var next = src.nextElementSibling || src.nextSibling
next.style.display = (next.style.display =="block")?"none":"block"
}
}
}
</script>
</head>
<body>
<div id="nav">
<h3>管理区</h3>
<div>
<a href="#">建议</a>
<a href="#">链接</a>
<a href="#">联系</a>
</div>
<h3>交流区</h3>
<div>
<a href="#">JavaScript</a>
<a href="#">Delphi</a>
<a href="#">VC++</a>
</div>
</div>
</body>
</html>
大概的过程是这样的：...
a(this).addClass("animated").find(".aninode").each(function() {
a(this).addClass(a(this).attr("data-animate"))
})
...
页面滚动到每个 section 元素的时候，先给它加个名为 animated 的 class ，在这样的 section 内部找到 class 名为 aninode 的 div 元素。这样的 div 元素或者其内部的元素会有个 data-animate="a-****" 的属性。把这个属性的值，也就是 a-**** 也当做 class 名称传给这个 div 元素或者其内部的元素。这个 class 里面就包含有动画样式。也就是说，通过 class="animated" 当做钩子，有 animated 这个 class 的时候，名为 aninode 的 div 元素或者其内部的元素才会执行相关的动画效果。
动画效果的 CSS 样式在 core.js 里面。控制动画执行是在 baomi.js 里面。
其实这个页面可以再完善下 section 元素 move 出屏幕的时候，去掉 animated；当move 回来的时候再加上 animated。目前的情况是，滚动到页面最低下以后，再往上滚动页面，就看不见动画效果了
