繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jQuery 位置插件
- Javascript
- javascript下操作css的float属性的特殊写法
- javascript之DIV拖动类 支持在FF下拖动,调用简单
- Expandable "Detail" Table Rows
- 用javascript实现给出的盒子的序列是否可连为一矩型
- PNGHandler-借助JS让PNG图在IE下实现透明（包括背景图）
- JS创建优美的页面滑动块效果 - Glider.js
- 发一个比较漂亮的选项卡动态增删的效果
- 可多次使用的仿126邮箱选项卡的源码
- javascript仿XP关机效果的弹出窗口功能
- JS控制CSS样式的方法
- 非常漂亮的JS代码经典广告
- 推荐自用 Javascript 缩图函数 (onDOMLoaded)……
- 几个不错的自动收缩菜单导航效果
- iframe src为图片时的高度自适应的代码
- 论坛转贴工具中用到的正则表达式学习正则的好例子
- 用javascript实现的不错的一款网页选项卡
- 摘自百度的图片轮换效果代码
- 用javascript实现旋转图片效果的代码
- javascript 制作坦克大战游戏初步 图片与代码
- 比较简单的jquery教程 Easy Ajax with jQuery 中文版全集
Javascript 中的 jQuery 位置插件
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 93 ::
收藏到网摘: n/a
可以让指定的层浮动到网页上的任何位置，当滚动条滚动时它会保持在当前位置不变，不会产生闪动 插件代码：
/*任意位置浮动固定层*/
/*没剑(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" style="background-color: #666633; width: 300px; height: 100px;padding:2px;color:white;">右上角</div>
<div id="floatAd" style="background-color: #667733; width: 300px; height: 100px;padding:2px;color:white;">左下角</div>
<div id="test" style="background-color: #665533; width: 300px; height: 100px;padding:2px;color:white;">
<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>
评论 (0) All
