-------------------------------------jquery.floatDiv.js---------------------------------------------
/*任意位置浮動固定層*/
/*沒劍(http://regedit.cnblogs.com) 08-03-11*/
/*說明：可以讓指定的層浮動到網頁上的任何位置，當滾動條滾動時它會保持在當前位置不變，不會產生閃動*/
/*2008-4-1修改：當自定義right位置時無效，這里加上一個判斷
有值時就不設置，無值時要加18px已修正層位置在ie6下的問題
*/
/*調用：
1 無參數調用：默認浮動在右下角
$("#id").floatdiv();
2 內置固定位置浮動
//右下角
$("#id").floatdiv("rightbottom");
//左下角
$("#id").floatdiv("leftbottom");
//右下角
$("#id").floatdiv("rightbottom");
//左上角
$("#id").floatdiv("lefttop");
//右上角
$("#id").floatdiv("righttop");
//居中
$("#id").floatdiv("middle");
3 自定義位置浮動
$("#id").floatdiv({left:"10px",top:"10px"});
以上參數，設置浮動層在left 10個像素,top 10個像素的位置
*/
jQuery.fn.floatdiv=function(location){
//ie6要隱藏縱向滾動條
var isIE6=false;
if($.browser.msie && $.browser.version=="6.0"){
$("html").css("overflow-x","auto").css("overflow-y","hidden");
isIE6=true;
};
$("body").css({margin:"0px",padding:"0 10px 0 10px",
border:"0px",
height:"100%",
overflow:"auto"
});
return this.each(function(){
var loc;//層的絕對定位位置
if(location==undefined || location.constructor == String){
switch(location){
case("rightbottom")://右下角
loc={right:"0px",bottom:"0px"};
break;
case("leftbottom")://左下角
loc={left:"0px",bottom:"0px"};
break;
case("lefttop")://左上角
loc={left:"0px",top:"0px"};
break;
case("righttop")://右上角
loc={right:"0px",top:"0px"};
break;
case("middle")://居中
var l=0;//居左
var t=0;//居上
var windowWidth,windowHeight;//窗口的高和寬
//取得窗口的高和寬
if (self.innerHeight) {
windowWidth=self.innerWidth;
windowHeight=self.innerHeight;
}else if (document.documentElement&&document.documentElement.clientHeight) {
windowWidth=document.documentElement.clientWidth;
windowHeight=document.documentElement.clientHeight;
} else if (document.body) {
windowWidth=document.body.clientWidth;
windowHeight=document.body.clientHeight;
}
l=windowWidth/2-$(this).width()/2;
t=windowHeight/2-$(this).height()/2;
loc={left:l+"px",top:t+"px"};
break;
default://默認為右下角
loc={right:"0px",bottom:"0px"};
break;
}
}else{
loc=location;
}
$(this).css("z-index","9999").css(loc).css("position","fixed");
if(isIE6){
if(loc.right!=undefined){
//2008-4-1修改：當自定義right位置時無效，這里加上一個判斷
//有值時就不設置，無值時要加18px已修正層位置
if($(this).css("right")==null || $(this).css("right")==""){
$(this).css("right","18px");
}
}
$(this).css("position","absolute");
}
});
};
------------------------------------------------------html代碼----------------------------------------
<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>任意位置浮動固定層DEMO</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.floatDiv.js"></script>
<script type="text/javascript">
$(function(){
$("#test").floatdiv({top:"200px",right:"100px"});
});
</script>
</head>
<body>
<div id="test" style="background-color: #666633; width: 300px; height: 100px;padding:2px;color:white;">
我是測試內容~
我是測試內容~
我是測試內容~
我是測試內容~
我是測試內容~
我是測試內容~
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>