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

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

演示一：默认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.erdangjiade.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.erdangjiade.com/"> <img src="http://www.erdangjiade.com/Public/images/logo.png" /> </a>

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