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程序设计有所帮助。