fixPosition固定div位置（跨浏览器浮动定位）
代码（看着可能比较多，大部分是在处理兼容ie6）：/* *author:sohighthesky *From:http://www.uedsky.com/ *Date:2009-11-1 */ /* *target 要固定的元素对象，也可以是元素的id *pos:object/string 指定固定到的位置，类型为object时，使用json方式如{right:200,bottom:50} ，为string时可选参数如下： *cc,正中间,lc左边,rc 右边 *lt左上角,ct 上边,rt右上角 *lb 左下角,cb 底部,rb 右下角 */ var fixPosition=function(target,pos) { this.target= this.g(target); this.pos=pos; this.init();//}; fixPosition.prototype={ isScroll:navigator.userAgent.indexOf("MSIE 6")!=-1 ||(window.ActiveXObject && document.compatMode!="CSS1Compat"), ae:function(e,call) { if(window.addEventListener) window.addEventListener(e,call,false); else window.attachEvent("on"+e,call); }, g:function(id) { return typeof(id)=="string"?document.getElementById(id):id; }, setPos:function() {//设置位置 var de; if(document.compatMode=="CSS1Compat")de=document.documentElement; else de=document.body; if(typeof(this.pos)=="string") {// if(!this.isScroll){ switch(this.pos.charAt(0)) { case "l": this.target.style.left="0px"; break; case "r": this.target.style.right="0px"; break; default: this.target.style.left=(de.clientWidth-this.target.clientWidth)/2 +"px"; break; } switch(this.pos.charAt(1)) { case "t": this.target.style.top="0px"; break; case "b": this.target.style.bottom="0px"; break; default: this.target.style.top=(de.clientHeight-this.target.clientHeight)/2 +"px"; break; } }else { switch(this.pos.charAt(0)) { case "l": this.target.style.left=de.scrollLeft+"px"; break; case "r": this.target.style.left=de.scrollLeft+de.clientWidth-this.target.clientWidth +"px"; break; default: this.target.style.left=de.scrollLeft+((de.clientWidth-this.target.clientWidth)/2)+"px"; break; } switch(this.pos.charAt(1)) { case "t": this.target.style.top=de.scrollTop+"px"; break; case "b": this.target.style.top=de.scrollTop+de.clientHeight-this.target.clientHeight+"px"; break; default: this.target.style.top=de.scrollTop+((de.clientHeight-this.target.clientHeight)/2)+"px"; break; } } } else { if(!this.isScroll) { for(var p in this.pos) this.target.style=this.pos+"px"; } else { for(var p in this.pos) { switch(p.toLowerCase()) { case "left": this.target.style.left=de.scrollLeft+this.pos+"px"; break; case "right": this.target.style.left=de.scrollLeft+de.clientWidth-this.target.clientWidth-this.pos+"px"; break; case "top": this.target.style.top=de.scrollTop+this.pos+ "px"; break; case "bottom": this.target.style.top=de.scrollTop+de.clientHeight-this.target.clientHeight-this.pos+"px"; break; } } } } }, init:function() { if(!this.pos) throw Error("Invalid arguments ."); if(!this.isScroll) this.target.style.position="fixed"; else this.target.style.position="absolute"; var timer,o=this; this.ae("resize",function() {//支持fixed的浏览器窗体大小改变时也重置位置，防止中间无法居中 clearTimeout(timer); timer=setTimeout(function() { o.setPos(); },30); }); if(this.isScroll) {//滚动 this.ae("scroll",function() { clearTimeout(timer); timer=setTimeout(function() { o.setPos(); },30); }); } this.setPos(); }}/**强烈建议您的页面加上w3c的dtd*/
示例代码：
<!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> <title>固定元素位置</title> <style type="text/css"> body,th,td {font-size:10pt;font-family:Tahoma,Arial,'\5b8b\4f53','\5FAE\8F6F\96C5\9ED1';} a{color:#3366CC; text-decoration:none;} #div1 div {width:300px;height:140px;border:solid 1px #0066CC;text-align:center;vertical-align:middle;line-height:1.8; } </style></head><body><div id="div1" style="height:2000px;width:2000px"><div pos="cc">author:<a href="http://hi.csdn.net/sohighthesky">sohighthesky</a><br/>Date:2009-11-1</div><div pos="lt">左上角</div><div pos="ct">上边</div><div pos="rt">右上角</div><div pos="lc">左边</div><div pos="rc">右边</div><div pos="lb">左下角</div><div pos="cb">下边</div><div pos="rb">右下角</div><div>自定义位置1:{left:60,top:160}</div><div>自定义位置2:{right:200,bottom:50}</div></div></body><script type="text/javascript" src="fixPosition.js"></script><script type="text/javascript">var divs=document.getElementById("div1").getElementsByTagName("div");var length=divs.length;for(var i=0;i<length-2;i++) {var cur=divs;new fixPosition(cur,cur.getAttribute("pos"));}new fixPosition(divs,{left:60,top:160});new fixPosition(divs,{right:200,bottom:50});</script></html>
via sohighthesky
页:
[1]