您的位置：首页 > 其它

自己写的一个div随页面滚动的效果

2013-12-11 13:25 274 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style>

html,body{

padding:0;

margin:0;

}

</style>

</head>

<body>

<div id="aa" style="width:200px;height:200px;background:#c0c0c0;" >我跟随屏幕滚动</div>

<div id="bb" style="width:200px;height:200px;background:#c0c0c0;" >我是固定不会动</div>

<div style="width:100%;height:500px;background:#000"></div>

<div style="width:100%;height:500px;background:green"></div>

<div style="width:100%;height:500px;background:red"></div>

</body>

</html>

<script>

function scroll(p){

var d = document,dd = d.documentElement,db = d.body,w = window,o = d.getElementById(p.id),ie = /msie/i.test(navigator.userAgent),style;

if(o){

o.style.cssText +=";position:"+(p.f&&!ie?'fixed':'absolute')+";"+(p.l==undefined?'right:0;':'left:'+p.l+'px;')+(p.t!=undefined?'top:'+p.t+'px':'bottom:0');

if(p.f&&ie){

o.style.cssText +=';left:expression(body.scrollLeft + '+(p.l==undefined?db.clientWidth-o.offsetWidth:p.l)+' + "px");top:expression(body.scrollTop +'+(p.t==undefined?db.clientHeight-o.offsetHeight:p.t)+'+ "px" );'

db.style.cssText +=";background-image:url(about:blank);background-attachment:fixed;"

}else{

if(!p.f){

w.onresize = w.onscroll = function(){

var timer,timer1;

return function(){

if(timer)

clearTimeout(timer);

timer = setTimeout(function(){

timer1 = setInterval(function(){

var st = db.scrollTop,c;

c = st - o.offsetTop + (p.t!=undefined?p.t:(w.innerHeight||db.clientHeight)-o.offsetHeight);

if(c!=0){

o.style.top = o.offsetTop + Math.ceil(Math.abs(c)/10)*(c<0?-1:1) + 'px';

}else{

clearInterval(timer1);

}

},10)

},100)//控制滚动的频率越大频率越慢

}

}()

}

}

}

}

scroll({

id:'aa'

})

scroll({

id:'bb',

l:0,

t:200,

f:1

})

</script><br />

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航