JavaScript网页随屏滚动(再次改进)

2024-09-05 12:18:33

字体：大中小

来源：转载

供稿：网友

再次重新修正的网页随屏滚动功能，加入了ie6下的固定分成了xhtml,html两个块解析，随着屏幕大小而变动，滚动时抖动的问题，主要体现在ff3.6上。用法：id 你要滚动的内容的id，l 横坐标的位置（不写为紧贴右边）， t 你要放在页面的那个位置默认是贴着底边 0是贴着顶边， f 1表示固定不写或者0表示滚动。此为xhtml1.0解析版，兼容ie6 7 8、ff3.5 3.6、chrome 4.1.2、safari

<!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=gbk" /><title>随屏滚动</title><style>	html,body{		padding:0;		margin:0;	}</style></head><body>	<div id="aa" style="width:100px;height:100px;background:#c0c0c0;" >我在随平滚</div>	<div id="bb" style="width:100px;height:100px;background:#c0c0c0;" >我静止不动</div>	<div style="width:100%;height:1500px;background:#000"></div>	<div style="width:100%;height:1500px;background:green"></div>	<div style="width:100%;height:1500px;background:red"></div></body></html><script>function scrollx(p){    	var d = document,dd = d.documentElement,db = d.body,w = window,o = d.getElementById(p.id),ie6 = /msie 6/i.test(navigator.userAgent),style,timer;    	if(o){    		o.style.cssText +=";position:"+(p.f&&!ie6?'fixed':'absolute')+";"+(p.l==undefined?'right:0;':'left:'+p.l+'px;')+(p.t!=undefined?'top:'+p.t+'px':'bottom:0');    		if(p.f&&ie6){				o.style.cssText +=';left:expression(documentElement.scrollLeft + '+(p.l==undefined?dd.clientWidth-o.offsetWidth:p.l)+' + "px");top:expression(documentElement.scrollTop +'+(p.t==undefined?dd.clientHeight-o.offsetHeight:p.t)+'+ "px" );';				dd.style.cssText +=';background-image: url(about:blank);background-attachment:fixed;';			}else{				if(!p.f){					 w.onresize = w.onscroll = function(){							clearInterval(timer);							timer = setInterval(function(){								//双选择为了修复chrome 下xhtml解析时dd.scrollTop为 0								var st = (dd.scrollTop||db.scrollTop),c;								c = st  - o.offsetTop + (p.t!=undefined?p.t:(w.innerHeight||dd.clientHeight)-o.offsetHeight);								if(c!=0){									o.style.top = o.offsetTop + Math.ceil(Math.abs(c)/10)*(c<0?-1:1) + 'px';								}else{									clearInterval(timer);										}							},10)											}									}			}    	}     }    scrollx({    	id:'aa'		    })	 scrollx({		id:'bb',		l:0,		t:200,		f:1	 })    /*    	id 你要滚动的内容的id    	l 横坐标的位置  不写为紧贴右边    	t 你要放在页面的那个位置默认是贴着底边 0是贴着顶边    	f 1表示固定 不写或者0表示滚动    */</script>

上一篇：网页Ajax Loading效果

下一篇：JS随屏滚动HTML4.0解析版代码

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注