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   class="iwvjtn8m0"   id="aa" style="width:100px;height:100px;background:#c0c0c0;" >我在隨平滾</div>	<div   class="iwvjtn8m0"   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解析版代碼