代码(看着可能比较多,大部分是在处理兼容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[p]=this.pos[p]+"px";
} else {
for(var p in this.pos) {
switch(p.toLowerCase()) {
case "left":
this.target.style.left=de.scrollLeft+this.pos[p]+"px";
break;
case "right":
this.target.style.left=de.scrollLeft+de.clientWidth-this.target.clientWidth-this.pos[p]+"px";
break;
case "top":
this.target.style.top=de.scrollTop+this.pos[p]+ "px";
break;
case "bottom":
this.target.style.top=de.scrollTop+de.clientHeight-this.target.clientHeight-this.pos[p]+"px";
break;
}
}
}
}
},
init:function() {
if(!this.pos)
throw Error("Invalid arguments [pos].");
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[i];
new fixPosition(cur,cur.getAttribute("pos"));
}
new fixPosition(divs[length-2],{left:60,top:160});
new fixPosition(divs[length-1],{right:200,bottom:50});
</script>
</html>
via sohighthesky
分享到:
相关推荐
jquery.floatdiv 浮动层固定位置 /*说明:可以让指定的层浮动到网页上的任何位置,当滚动条滚动时它会保持在当前位置不变,不会产生闪动*/ /*调用: 1 无参数调用:默认浮动在右下角 $("#id").floatdiv(); 2 内置...
div跟随固定在浏览器左边,上下拉动浏览器滚动条时div固定在左边,横向拉动滚动条时DIV会跟随主体而改变位置。
jquery 兼容所有浏览器的浮动div位置控制+例子 jquery 兼容所有浏览器的浮动div位置控制+例子 jquery 兼容所有浏览器的浮动div位置控制+例子 jquery 兼容所有浏览器的浮动div位置控制+例子 jquery 兼容所有浏览器的...
在页面固定div位置实示例,两种方法比较
js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟...
"让DIV固定在页面的某个位置而不随着滚动条随意滚动" 在前端开发中,我们常常需要让某个DIV元素固定在页面的某个位置,而不随着滚动条的滚动而移动。这可以通过使用CSS的position属性来实现,特别是使用fixed值。...
CSS基础声明定位定位简介流定位浮动定位相对定位绝对定位固定定位粘性定位堆叠顺序定位属性总结 定位 定位简介 定位:定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的...
js实现div随浏览器高度变化,主要是高度变化和实现滚动条,还有侧栏显示隐藏,可以作为一个地图开发界面的参考
纯css控制div保持在浏览器底部
DIV可固定到页面的固定位置,不随页面的滚动而变化,还可以拖动DIV重新固定位置
浮层 广告 div右下角浮动 右下角浮动 浮动窗口。 兼容性良好。 很好用漂亮的东西。值得研究。
这是一款使用jQuery制作的可以使某个div固定的某个位置的页面布局特效插件。该div固定位置插件可以使侧边栏固定,也可以使顶部div缩小后固定在顶部或使某些按钮固定在页面上,非常实用。
很好的div浮动层显示,一些下拉改为透明的浮动层,便于做查询等功能
附带完整的例子,对js完全不会的人也可以轻松使用,只要把例子中的js引用语句复制过去(地址当然要重新设定),然后把函数 ... $("#compore").floatdiv({left:"10px",top:"100px"}); }); 中10px和100px改成想要的数字就ok
悬浮固定DIV_demo,http://blog.csdn.net/ymruseuse/article/details/78589480
div浮动层,详细说明了div怎么在div上实现浮动的代码 这是实验效果。用.net实现的。
本文实例讲述了JS简单实现DIV相对于浏览器固定位置不变的方法。分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html> <head> <title>...
div+css浏览器兼容问题
这个例子是,div弹出层并且固定位置,弹出层的弹出方式为滑动方式。