只能用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/html charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{width:100pxheight:100pxbackground:redposition:absolute}
</style>
<script>
window.onload = function()
{
var oDiv = document.getElementById('div1')
var oBtn= document.getElementById('btn')
oBtn.onclick = move
}
var i=0
var timer = null
function move()
{
clearInterval(timer)
i++
if(i%2==1){
timer = setInterval(function()
{
var oDiv = document.getElementById('div1')
var speed = (80-oDiv.offsetLeft)/8
speed = speed > 0?Math.ceil(speed) : Math.floor(speed)
oDiv.style.left = oDiv.offsetLeft + speed + 'px'
},30)
}
else{
timer=setInterval(function()
{
var oDiv = document.getElementById('div1')
var speed = (0-oDiv.offsetLeft)/8
speed = speed > 0?Math.ceil(speed) : Math.floor(speed)
oDiv.style.left = oDiv.offsetLeft+speed + 'px'
},30)
}
}
</script>
</head>
<body>
<input type="button" value="move" id="btn"/>
<div id="div1"></div>
</body>
</html>
（这个思想我一开始就想到了，但是，一直忘了关定时器，所以，想要的效果一直没做出了，找人帮忙后才搞定！！）
