jQuery 位置插件

bd3700

bd3700

2016-02-19 16:05

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享jQuery 位置插件吧。
插件代码:
/*任意位置浮动固定层*/
/*没剑(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
divhellobr /
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
展开更多 50%)
分享

猜你喜欢

jQuery 位置插件

Web开发
jQuery 位置插件

jquery 插件 任意位置浮动固定层

Web开发
jquery 插件 任意位置浮动固定层

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jQuery select控制插件

Web开发
jQuery select控制插件

javascript jQuery插件练习

Web开发
javascript jQuery插件练习

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JQuery知识:20个jQuery教程+11个jQuery插件

Web开发
JQuery知识:20个jQuery教程+11个jQuery插件

jQuery 5款相关插件

Web开发
jQuery 5款相关插件

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

使用CHECK约束执行业务规则

使用CHECK约束执行业务规则

并排查看多个Word2010文档窗口

并排查看多个Word2010文档窗口
下拉加载更多内容 ↓