jQuery 位置插件_Javascript教程-查字典教程网
jQuery 位置插件
jQuery 位置插件
发布时间:2016-12-30 来源:查字典编辑
摘要:插件代码:/*任意位置浮动固定层*//*没剑(http://regedit.cnblogs.com)08-03-11*//*说明:可以让指定...

插件代码:

/*任意位置浮动固定层*/

/*没剑(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");

}

});

};

使用方法:

<!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>

<script type="text/javascript" src="../js/jquery-1.2.6.js"></script>

<script type="text/javascript" src="../js/jquery.floatDiv.js"></script>

<script type="text/javascript">

$(function(){

$("#test").floatdiv({top:"200px",right:"200px"});

$("#rtop").floatdiv("righttop");

$("#floatAd").floatdiv({top:"50px",left:"50px"});

});

</script>

</head>

<body>

<div id="rtop">右上角</div>

<div id="floatAd">左下角</div>

<div id="test">

<p>

/*任意位置浮动固定层*/<br />

/*说明:可以让指定的层浮动到网页上的任何位置,当滚动条滚动时它会保持在当前位置不变,不会产生闪动*/<br />

/*调用:<br />

1 无参数调用:默认浮动在右下角<br />

$("#id").floatdiv();</p>

<p>

2 内置固定位置浮动<br />

//右下角<br />

$("#id").floatdiv("rightbottom");<br />

//左下角<br />

$("#id").floatdiv("leftbottom");<br />

//右下角<br />

$("#id").floatdiv("rightbottom");<br />

//左上角<br />

$("#id").floatdiv("lefttop");<br />

//右上角<br />

$("#id").floatdiv("righttop");<br />

//居中<br />

$("#id").floatdiv("middle");</p>

<p>

3 自定义位置浮动<br />

$("#id").floatdiv({left:"10px",top:"10px"});<br />

以上参数,设置浮动层在left 10个像素,top 10个像素的位置<br />

*/</p>

</div>

<div>hello<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 />

hello

</div>

</body>

</html>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类