最新赞助活动温馨提示:9.9元终身VIP,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 二当家的 2015-08-23 15:21浏览(1479)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,整站资源免费下载!3、¥9.9充值终身VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

powerFloat功能强大的jQuery弹出层插件
分类:悬浮层/弹出层 > 弹窗 难易:中级
查看演示 下载资源: 108

关注微信号获取此Demo视频教程:

下载资源 下载积分: 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" });
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/441.html
评论0
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

1 2