powerFloat功能强大的jQuery弹出层插件

本文演示了powerFloat八种不同的悬浮层效果，只要你学会该插件的用法，任何弹出层或悬浮层都可以简单轻松的写出来，而且高大上哦。

淘建站为您提供更多_悬浮层/弹出层_弹窗_弹出层_浮动，在此特别感谢您对我们的支持与厚爱！

演示一：默认rel加载

默认rel加载

$("#trigger1").powerFloat();

演示二：target参数为选择器

<a id="trigger3" href="###">target参数为选择器</a>

$("#trigger3").powerFloat({ target: ".target_box" });

演示三：Ajax加载外部元素

<a id="trigger4" href="javascript:;" rel="http://www.sucaiq.com/Public/images/logo.png">rel属性显示图片</a>

$("#trigger4").powerFloat({ targetMode: "ajax" });

演示四：加载外部HTML片段

<button id="trigger6">点击切换显示</button>

$("#trigger6").powerFloat({ eventType: "click", target: "/study/201009/html-load.html", targetMode: "ajax" });

演示五：下拉列表的显示

<button id="trigger8">点击显示姓名列表▼</button>

$("#trigger8").powerFloat({ width: "inherit", eventType: "click", target: ["唐丽霞", "徐栋梁", "成霞", "王庆花", "王腊梅", "朱小丽", "束方娟", "吉回秀", "陈阳", "<a href='##'>更多 >></a>"], targetMode: "list" });

演示六：简单提示的显示

输入密码：<input class="pwdTrigger" type="password" placeholder="6~20个字符" /> 再次输入：<input class="pwdTrigger" type="password" placeholder="输入与上面一样的密码" />

$(".pwdTrigger").powerFloat({ eventType: "focus", targetMode: "remind", targetAttr: "placeholder", position: "1-4" });

演示七：自定义浮动提示

<a class="tipTrigger" href="###" tip="摸我">摸我</a> <a class="tipTrigger" href="###" tip="我也要">我也要</a> <a class="tipTrigger" href="###" tip="还有我">还有我</a>

$(".tipTrigger").powerFloat({ offsets: { x: -10, y: 22 }, showDelay: 200, hoverHold: false, targetMode: "tip", targetAttr: "tip", position: "3-4" });

演示八：鼠标跟随效果

缩略图显示大图，同时鼠标跟随(垂直方向)：

<a class="dib" id="trigger14" href="http://www.sucaiq.com/"> <img src="http://www.sucaiq.com/Public/images/logo.png" /> </a>

$("#trigger14").powerFloat({ targetMode: "ajax", targetAttr: "href", hoverFollow: "y", position: "6-8" });