当前位置:首页 > 日记 > 正文

jQuery任意位置浮动固定层插件用法示例

jQuery任意位置浮动固定层插件用法示例
本文介绍了jQuery浮动固定层插件在任何位置的使用,供大家参考,具体分析如下:

说明:指定的图层可以浮动到网页上的任何位置。当滚动条被滚动时,它在当前位置保持不变,不会产生闪烁。

2009-06-10修改:修改实施固定浮动层的插件,使用大型固定层定位

2009-07-16修正:修正无法在IE6固定在顶部的问题

09-11-5修改:当自定义层的绝对位置添加,加上判断为空值

这个方法是从Tianya新页面上偷来的。

经过多次测试,基本上没有bug了~

呼叫:

1个非参数调用:默认浮动在右下角。

$(# ID)的Floatdiv();

2内置固定位置浮动
右/右角
$(# ID)。Floatdiv(rightbottom );
左/右角
$(# ID)。Floatdiv(leftBottom );
右/右角
$(# ID)。Floatdiv(rightbottom );
左/右角
$(# ID)。Floatdiv(lefttop );
右/右角
$(# ID)。Floatdiv(righttop );
/中心
$(# ID)。Floatdiv(中);

此外,还增加了四种新的固定位置方法。

middletop(中心顶部),middlebottom(中-低),左,右

3自定义位置浮动

$(# ID)。Floatdiv({左:10px

上面的参数将浮动层设置为左边的10个像素,以及顶部10个像素的位置。
jquery FN。floatdiv =功能(位置){
法官/浏览器版本
无功isie6 = false;
var;
var ua = navigator.useragent.tolowercase();
VaR的;
(S = ua.match( / MSIE({ D. } +)/))sys.ie =的{ 1 }:0;
如果(Sys.ie Sys。IE = =6){
isie6 =真;
}
VaR WindowWidth,windowheight; / /高赫款窗口
/ /把窗高赫款
如果(自我。innerheight){
self.innerwidth WindowWidth =;
windowheight = self.innerheight;
} else if(文件。documentelementdocument。文档元素}。自己){
document.documentelement.clientwidth WindowWidth =;
windowheight = document.documentelement.clientheight;
否则如果(文档体){ }
document.body.clientwidth WindowWidth =;
windowheight = document.body.clientheight;
}
返回this.each(函数(){()
绝对位置层
var包= $( );
var = 1;
如果(位置= =定义的| | location.constructor = =字符串){
开关(位置){
案例(rightbottom ): / /右上角
LOC = {右:0px
打破;
案例(leftBottom ): / /左上角
LOC = {左:0px
打破;
案例(lefttop ): / /左上角
LOC = {左:0px
顶部= 0;
打破;
案例(righttop ): / /右上角
LOC = {右:0px
顶部= 0;
打破;
案例(middletop ): / /顶部中心
LOC = {左:WindowWidth / 2 - $(this)。Width()/ 2 +PX
顶部= 0;
打破;
案例(middlebottom ):中/低
LOC = {左:WindowWidth / 2 - $(this)。Width()/ 2 +PX
打破;
案例(左): / /左中心
LOC = {左:0px
最高windowheight / 2 - $(this)。Height() / 2;
打破;
案例(右): / /权利中心
LOC = {右:0px
最高windowheight / 2 - $(this)。Height() / 2;
打破;
案例()
var l = 0; /左
var T = 0;
L = WindowWidth / 2 - $(this)。Width() / 2;
T = windowheight / 2 - $(this)。Height() / 2;
顶部=;
左:L
打破;
默认值:默认为右下角
定位为rightbottom ;
LOC = {右:0px
打破;
}
其他{ }
位置;
警报(LOC);
STR = loc.top VaR;
/ / 09-11-5修改:顶部为一个空的价值判断
如果(typeof(STR)!= 'undefined){
STR = str.replace(PX
顶部= STR;
}
}
/ * * /显示IE6的CSS hack
如果(isie6){
如果(顶部= 0)
{
换行符( );
其他{ }
换行符( );
}
}
$();
Wrap.css(LOC)。Css({位置:固定
如果(isie6)
{
wrap.css(位置
没有 / /这样,IE6的表达会跳动现象
至于为什么 / /这是为什么nothing.txt这个,我不知道,想知道的同学可以告诉我
$()Css(背景附件
}
将添加到固定层固定层。
$(这)AppendTo(包);
});
};

完整的实例代码在这里下载。

希望本文能对大家的jQuery程序设计有所帮助。

相关文章

PHP判断IP访问的方法

PHP判断IP访问的方法

方法,电脑软件,PHP,IP,本文介绍了用PHP判断IP访问权限的方法,供大家参考: 功能getip(){ 如果(!空(美元_server {http_client_ip})){ CIP _server美元美元=http_client_ip} {; 否则如果(!空(美元_server { http_x_forwarded_for })){ CIP _server美元美元=…

恋人)。签名:我离开了,你会原谅吗情人

恋人)。签名:我离开了,你会原谅吗情人

你会,人格,离开了,恋人,情人,我一直在等待,直到眼泪离开头 这是我离开你的秋天吗。 爱你,那么你是一把刀刺穿我的心 你怎么记得我,笑或沉默,没有人能让你孤独多年。 我很高兴有你,但我很抱歉失去你。 只要你能记得我,即使是恨或德。 如果时…

PS教程为新娘摄影教程削减纯颜色背

PS教程为新娘摄影教程削减纯颜色背

教程,新娘,颜色,背景,电脑软件,这个PS挑选出来的纯色背景的新娘照片教程是一个专门为你安排的小编辑,希望能帮到你! 在婚纱照中,往往很难找到某个场景的镜头,这需要在摄影棚拍摄一个单一的,然后做后期的铺垫。 1、打开文件,将单色背景婚纱照拍摄…

PS图象处理软件将暗淡的图像调制的

PS图象处理软件将暗淡的图像调制的

图像,调制,暗淡,图象,处理软件,素材图片是黑暗的,层次感不是很好,作者处理的非常专业,首先要突出整体,要处理局部明暗,然后用面具给局部区域着色,为屏幕增添更多亮点。 素材图片是黑暗的,层次感不是很好,作者处理的非常重要,首先要突出整体,要处理局…

Excel中如何自定义单元序列的excel

Excel中如何自定义单元序列的excel

自定义,教程,单元,序列,电脑软件,Excel中的单元格填充必须是不熟悉的,毕竟它是Office中常用的操作之一,填充只适用于常规数据。对于一些通常是输入和不规则的数据,这是很难做到的。没有更好的办法吗事实上,Excel已经为用户考虑过这一点,通过输入…

excel如何在页眉下绘制一个excel

excel如何在页眉下绘制一个excel

绘制,页眉,如何在,电脑软件,excel,在Excel中添加到工作表中的背景在整个工作表中排列。它只能在桌子的顶部吗 1、执行格式具有;表RARR;背景命令,打开工作表背景;;对话框,选择图片需要背景,按下插入按钮,将图片,整个工作表下。 2。按住Ctrl键时,鼠标拖…

PS给中的室内物体添加阳光。

PS给中的室内物体添加阳光。

阳光,物体,室内,电脑软件,PS,本教程是向朋友介绍PS给室内物体添加阳光和灯光效果的图片。这个教程很好。它也很简单。建议大家一起学习。 在图像处理中,我们经常需要对一些室内图片添加一些特效。接下来,萧边介绍了PS添加阳光和灯光效果在室…

那些知道我QQ密码的人,为什么不换呢

那些知道我QQ密码的人,为什么不换呢

常见问题,密码,的人,电脑软件,QQ,那些知道我QQ密码的人,为什么不换呢 为了确保账户安全,密克罗尼西亚的QQ安全中心受到保护,那些很难在短时间内修改几万个QQ的密码。因此,当你的QQ密码被黑客侵入时,不一定马上就摆脱掉。…

幽默,有趣,有趣,有趣,个性签名和个性签

幽默,有趣,有趣,有趣,个性签名和个性签

有趣,个性签名,幽默,电脑软件,别人都喝得醉醺醺的,我生气地买饮料填肚子。 父亲生气时骂我是个死孩子。 当你变胖时,你会生气,当你生气的时候你想去吃,结果是很胖。 昨天我梦见我死了,看起来很高兴。 在新的一年里,除了最幸福的夫妇,以及吃货。 最…

PS在户外汽车招贴设计课程中的应用

PS在户外汽车招贴设计课程中的应用

招贴,在户外,课程,电脑软件,PS,海报设计是视觉传达的形式,该形式第一次人民关注的布局,并获得瞬间的刺激,这就要求设计师把图片、文字、色彩、空间的完美结合其他元素,以恰当的形式向人们宣传信息,跟进汽车海报合成。 汽车户外海报本教程是在创…

使用window.prompt()实现一个弹出的

使用window.prompt()实现一个弹出的

输入,用户,弹出,对话框中,电脑软件,看到window.prompt(意外)的方法,它没有被使用过,孤陋寡闻,但现在让我们学习。 有时,需要在网页中显示一个提示框。另外,用户需要在提示框中输入一些内容,可以通过提示对象来实现。 无功_saytext =得到(我很笨); 无…

ps制作一个漂亮的双光动态签名教程

ps制作一个漂亮的双光动态签名教程

教程,动态,漂亮,电脑软件,ps,这里是萧边介绍PS打造美丽双缆动态签名的方法。本教程制作的签名非常漂亮,难度也不大。建议你喜欢你的朋友一起学习。 本教程主要是介绍PS来创建漂亮的双流光动态签名方法。这个教程很好。作者很好地介绍了这个…