一、写插件的缘由
为什么想写此插件，想来想去，归结为一个字：“懒”。不想为明明两个类似的功能分别写代码，本应喝茶看美女的休闲时光晃荡在本可避免的代码上，对于我来讲，就是白白耗费自己的青春。于是，干脆，一鼓作气，把这些类似的功能集合到一起，一个插件搞定，一了百了了。这种感觉就好比《大话西游》里悟空一巴掌拍死唐僧这只苍蝇一样。那，这里提及的类似的功能是指？当当当当，就是与某元素有位置关系的浮动层（例如tip类效果，鼠标经过显示大图，下拉列表等）。
插件名为jquery-powerFloat.js。//zxx:之前我喜欢用”.”连接，后发现在使用combo合并脚本的时候会出问题，于是，现在使用”-”连接名称了。
powerFloat顾名思意就是“强大的浮动”。使用库jQuery，大小20K多点，使用YUICompressor压缩后大小折半，是有史以来代码量写的最多的一个插件了。
支持hover, click, focus以及无事件触发；支持多达12种位置的定位，出界自动调整；支持页面元素加载，Ajax加载，下拉列表，提示层效果，tip类效果等；可自定义装载容器；内置UI不错的装载容器；支持鼠标跟随等。
三、demo及下载demo
您可以狠狠地点击这里：万能浮动插件powerFloat测试页面
下为demo页面中鼠标经过显示大图效果截图：
下载
JS文件下载：jquery-powerFloat.js(未压缩) 或 jquery-powerFloat-min.js(压缩)
zip打包下载：jquery-powerFloat.zip
//zxx:下载均右键 – [目标|链接]另存为
四、如何使用使用很简单，统一的模式，就是$(选择器).powerFloat({..});具体使用如下：
首先不要忘了加载CSS文件，如下：
<link href="https://www.zhangxinxu.com/study/css/powerFloat.css" type="text/css" />
然后，在页面上加载jQuery库以及本文的jquery-powerFloat.js文件，如下：
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><script type="text/javascript" src="https://www.zhangxinxu.com/study/js/jquery-powerFloat.js"></script>
假设此时页面上有个链接，其HTML如下：
<a href="javascript:;">经过我</a>
则：
$("#trigger").powerFloat();
就可以了。此段代码实现的效果是，鼠标经过“经过我”这个文字链接，会在其下方显示页面上id为”targetBox”的元素（可参见demo页面中第一个例子）。
如果要用几个关键词来概括此插件，无非就是触发元素(trigger，也就是选择器绑定对象)，触发事件(API中的eventType)，浮动元素(target，各种方式获取的元素)，定位(target的定位)。下文中，trigger一词就是指触发元素，target指浮动元素。
由于插件集合的功能较多，所以使用规则稍微多了点，具体可参见下面的API表格展示，之后的详细解释。这里就不多说了。
五、API参数 jQuery powerFloat插件API参数参数名默认值释义说明width"auto"其他可选参数："inherit"，数值(px)(百分比等)，"auto"表宽度自动，"inherit"表宽度与方法触发元素宽度一样offsets{x:0, y:0}浮动层的偏移值。可正可负。如果为正值，右下方元素右下方偏移，左上方元素左上方偏移。偏移方向为扩散状zIndex999浮动框层级。插件自带小三角层级为999+1，数值上总是大1eventType"hover"其他可选参数："click", "focus"，如果参数为其他，则绑定触发浮动层的显示与定位showDelay0事件类型(eventType)为"hover"时浮动层显示的延迟时间，单位毫秒hideDelay0鼠标移出对象时浮动层隐藏延迟时间hoverHoldtrue布尔型，浮动层是否鼠标悬停。如果为false，只要鼠标移出触发元素，浮动层即隐藏hoverFollowfalse其他可选参数：true, "x", "y"。是否鼠标跟随。"x"表示仅水平方向跟随，"y"为垂直方向，true或其他参数为任意方向跟随targetMode"common"字符串，关键字参数还有："ajax", "list", "remind"。表示浮动层的类型targetnull浮动层内容来源，优先选取来源，根据targetMode的不同，这里的参数类型也有所不同targetAttr"rel"自定义的标签属性。也是浮动层内容来源，可用作元素id，或是字符串containernulljQuery对象，转载浮动层的容器，如果targetMode自定义，可以使用"plugin"关键字，表示使用插件自带容器reverseSharpfalse布尔型。尖角显示是否反转。默认ajax, remind是显示三角的，其他如list和自定义形式是不显示的position"4-1"浮动层显示的位置。此规则稍微复杂，下面有详解edgeAdjusttrue布尔型。如果浮动层在显示屏之外，是否调整浮动层位置showCall$.noop浮动层显示时候的回调函数hideCall$.noop浮动层隐藏时候的回调函数
(create by zhangxinxu 2010-12-15)
六、API参数详解