只能用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>
(这个思想我一开始就想到了,但是,一直忘了关定时器,所以,想要的效果一直没做出了,找人帮忙后才搞定!!)
因为IE6的兼容性问题,所以这不考虑用fixed,代码如下,用了js的滚动事件
<html><head>
<meta charset="utf-8" />
<!-- CSS部分,宽度各100,红色背景,加了定位属性。 -->
<style>
*{margin:0padding:0}
#div1{width:100pxheight:100pxbackground:#F00position:absolutetop:100pxleft:0}
</style>
</head>
<body style="width:5000pxheight:500pxbackground:#F7F7F7">
<div id="div1">我是固定的</div>
</body>
<!-- js控制 开始 -->
<script>
//添加滚动事件
window.onscroll=function(){
//获取横向滚动距离的值
var nWidth=document.documentElement.scrollLeft||document.body.scrollLeft
//获取div标签对象
var oDiv=document.getElementById('div1')
//将div的left值更改为横向滚动值,从而达到固定位置的目的
oDiv.style.left=nWidth+'px'
}
</script>
<!-- js控制 结束 -->
</html>
原理已在注释中说明,例子不算很完美(滚动过快会闪烁,需要额外增加缓冲效果解决),仅供参考。