一、插件介绍
注意，插件名为jquery-powerFloat.js。不是jquery.powerFloat.js。作者说：在使用combo合并脚本的时候会出问题，于是，现在使用”-”连接名称了。
powerFloat顾名思意就是“强大的浮动”。使用库jQuery，大小20K多点，使用YUICompressor压缩后大小折半，支持hover, click, focus以及无事件触发；支持多达12种位置的定位，出界自动调整；支持页面元素加载，Ajax加载，下拉列表，提示层效果，tip类效果等；可自定义装载容器；内置UI不错的装载容器；支持鼠标跟随等。
二、插件作者
张鑫旭，博客：http://www.zhangxinxu.com/
三：插件图片
四：插件参数
| 参数名 | 默认值 | 释义说明 |
|---|---|---|
| width | "auto" | 其他可选参数："inherit"，数值(px)(百分比等)，"auto"表宽度自动，"inherit"表宽度与方法触发元素宽度一样 |
| offsets | {x:0, y:0} | 浮动层的偏移值。可正可负。如果为正值，右下方元素右下方偏移，左上方元素左上方偏移。偏移方向为扩散状 |
| zIndex | 999 | 浮动框层级。插件自带小三角层级为999+1，数值上总是大1 |
| eventType | "hover" | 其他可选参数："click", "focus"，如果参数为其他，则绑定触发浮动层的显示与定位 |
| showDelay | 0 | 事件类型(eventType)为"hover"时浮动层显示的延迟时间，单位毫秒 |
| hideDelay | 0 | 鼠标移出对象时浮动层隐藏延迟时间 |
| hoverHold | true | 布尔型，浮动层是否鼠标悬停。如果为false，只要鼠标移出触发元素，浮动层即隐藏 |
| hoverFollow | false | 其他可选参数：true, "x", "y"。是否鼠标跟随。"x"表示仅水平方向跟随，"y"为垂直方向，true或其他参数为任意方向跟随 |
| targetMode | "common" | 字符串，关键字参数还有："ajax", "list", "remind"。表示浮动层的类型 |
| target | null | 浮动层内容来源，优先选取来源，根据targetMode的不同，这里的参数类型也有所不同。支持function类似，可实现动态数据效果。 |
| targetAttr | "rel" | 自定义的标签属性。也是浮动层内容来源，可用作元素id，或是字符串 |
| container | null | jQuery对象，转载浮动层的容器，如果targetMode自定义，可以使用"plugin"关键字，表示使用插件自带容器 |
| reverseSharp | false | 布尔型。尖角显示是否反转。默认ajax, remind是显示三角的，其他如list和自定义形式是不显示的 |
| position | "4-1" | 浮动层显示的位置。此规则稍微复杂，下面有详解 |
| edgeAdjust | true | 布尔型。如果浮动层在显示屏之外，是否调整浮动层位置 |
| showCall | $.noop | 浮动层显示时候的回调函数。其中，上下文this为触发元素，支持一个参数，为浮动对象元素。但，多交互时候，该元素可能会丢失。 |
| hideCall | $.noop | 浮动层隐藏时候的回调函数。其中，上下文this为触发元素 |
五：插件例子
最新插件版本：
时间：2012-01-28 版本：v1.6.1
官方JS下载：
http://www.zhangxinxu.com/study/js/jquery-powerFloat.js
http://www.zhangxinxu.com/study/js/mini/jquery-powerFloat-min.js
本站JS下载：
http://www.ijquery.cn/js/jquery-powerFloat.js
http://www.ijquery.cn/js/jquery-powerFloat-min.js
DEMO：
例1、 http://www.ijquery.cn/study/demo/powerFloat/demo1.html 【官方所有例子】
例2、 http://www.ijquery.cn/study/demo/powerFloat/demo2.html 【淘宝的顶部下拉】
例3、 http://www.ijquery.cn/study/demo/powerFloat/demo3.html 【点击搜索框时弹出说明】
官方DEMO下载：
http://www.ijqery.cn/demo/powerFloat/powerFloat.zip
六：最简使用教程
1、JS和CSS引用
[js]
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/study/demo/powerFloat/js/jquery-powerFloat.js"></script>
<link href="http://www.ijquery.cn/study/demo/powerFloat/css/powerFloat.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function() {
$("#trigger").powerFloat();
});
</script>
<style>
.none{display:none;}
</style>
[/js]
2、HTML引用
[html]
<a id="trigger" href="javascript:;" rel="targetBox">经过我</a>
<div id="targetBox" class="none">测试弹出层</div>
[/html]
七：实例应用
1、【淘宝的顶部下拉】 http://www.ijquery.cn/study/demo/powerFloat/demo2.html
说明：这里用这个插件做下拉列表倒是不难，但是用CSS制作最右边竖线和下拉列表，是非常难的，建议好好学习学习CSS样式！
HTML代码：
[html]
<div id="header">
<div id="site-nav">
<ul>
<li>
<div>
<a href="#">我的淘宝<b></b></a>
</div>
</li>
<li>
<div>
<a href="#">我的账户<b></b></a>
</div>
</li>
</ul>
</div>
</div>
[/html]
JS代码
[js]
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/study/demo/powerFloat/js/jquery-powerFloat.js"></script>
<link href="http://www.ijquery.cn/study/demo/powerFloat/css/powerFloat.css" rel="stylesheet" type="text/css" />
<script>
$(function() {
//我的淘宝
$(".menu").powerFloat({
width: 96,
offsets: {
x: 0,
y: -1
},
targetMode: "list",
target: [{
href: "#",
text: "已买到的宝贝"
},{
href: "#",
text: "已卖出的宝贝"
}],
position: "3-2",
showCall: function() {
$(this).addClass("hover");
},
hideCall: function() {
$(this).removeClass("hover");
}
});
//我的账户
$(".mine").powerFloat({
width: 96,
offsets: {
x: 0,
y: -1
},
targetMode: "list",
target: [{
href: "#",
text: "我的资料"
},{
href: "#",
text: "退出"
}],
position: "3-2",
showCall: function() {
$(this).addClass("hover");
},
hideCall: function() {
$(this).removeClass("hover");
}
});
});
</script>
[/js]
CSS样式
[css]
/*头部*/
#header {
width: 100%;
background:#eeeeee;
margin:0 auto;
}
/*头部-的快捷菜单*/
#site-nav {
width: 950px;
margin:0 auto;
position: relative;
height: 22px;
line-height: 21px;
margin: 0 auto;
padding: 2px 0;
z-index: 10000;
color: #000;
}
#site-nav a {
color: #666;
}
#site-nav a:hover {
color: #f50;
}
/* site-nav位置在右上角 */
#site-nav .quick-menu {
position: absolute;
right: 0;
top: 0px;
}
/* site-nav 位置在右上角 元素右边的竖线-引用背景图片的竖线 */
#site-nav .quick-menu {
padding: 1px 5px 0 10px;
background: transparent url(img.png) no-repeat right 8px;
}
#site-nav .quick-menu li {
float:left;
}
/* 位置在右上角 元素的位置*/
#site-nav .menu-hd {
display: block;
position: relative;
height: 21px;
line-height: 17px;
margin: 3px 1px 0;
padding: 0 22px 0 10px;
cursor: pointer;
z-index: 10002;
}
/* 位置在右上角 元素的下拉三角*/
#site-nav .menu-hd b {
position: absolute;
right: 10px;
top: 7px;
width: 0;
height: 0;
border-width: 4px 4px;
border-style: solid;
border-color: #666 #eee #eee #eee;
font-size: 0;
line-height: 0;
-webkit-transition: -webkit-transform .2s ease-in;
-moz-transition: -webkit-transform .2s ease-in;
-o-transition: -webkit-transform .2s ease-in;
transition: -webkit-transform .2s ease-in;
}
/*鼠标经过后-边框及背景的变化*/
#site-nav .menu:hover .menu-hd,#site-nav .hover .menu-hd {
margin: 2px 0 0;
border: 1px solid #BFBFBF;
border-bottom: none;
background: white;
display: block;
}
/*鼠标经过后的三角变为斜三角*/
#site-nav .menu:hover .menu-hd b,#site-nav .hover .menu-hd b {
border-color: #666 #fff #fff #fff;
-moz-transform: rotate(180deg);
-moz-transform-origin: 50% 30%;
-webkit-transform: rotate(180deg);
-webkit-transform-origin: 50% 30%;
-o-transform: rotate(180deg);
-o-transform-origin: 50% 30%;
transform: rotate(180deg);
transform-origin: 50% 30%;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
top: 3px\9;
}
[/css]