特效描述：jquery 万能浮动框提示。jquery万能浮动框提示插件
代码结构
1. 引入CSS
2. 引入JS
3. HTML代码
jQuery万能浮动框插件测试
一、加载页面上元素
默认rel加载
HTML代码：默认rel加载JS代码：$("#trigger1").powerFloat();
target参数加载
HTML代码：target参数加载JS代码：$("#trigger2").powerFloat({
target: $("#targetBox")
});
target参数为选择器
HTML代码：target参数为选择器JS代码：$("#trigger3").powerFloat({
target: ".target_box"
});
二、Ajax加载外部元素
rel属性显示图片
HTML代码：rel属性显示图片JS代码：$("#trigger4").powerFloat({
targetMode: "ajax"
});
target参数为图片地址
HTML代码：target参数为图片地址JS代码：$("#trigger5").powerFloat({
target: "/image/study/s/s512/mm2.jpg",
targetMode: "ajax"
});
加载外部HTML片段：点击切换显示
HTML代码：点击切换显示JS代码：$("#trigger6").powerFloat({
eventType: "click",
target: "/study/09/html-load.html",
targetMode: "ajax"
});
加载外部页面数据失败：点击测试
HTML代码：点击测试JS代码：$("#trigger7").powerFloat({
eventType: "click",
target: "/",
targetMode: "ajax"
});
三、下拉列表的显示
纯文字列表下拉：点击显示姓名列表▼
HTML代码：点击显示姓名列表▼JS代码：$("#trigger8").powerFloat({
width: "inherit",
eventType: "click",
target: ["唐丽霞", "徐栋梁", "成霞", "王庆花", "王腊梅", "朱小丽", "束方娟", "吉回秀", "陈阳", "更多 >>"],
targetMode: "list"
});
带链接的文字下拉：更多文章▼
HTML代码：更多文章▼JS代码：$("#trigger9").powerFloat({
width: 250,
target: [
{
href: "##",
text: "这是文章1的说"
},
{
href: "##",
text: "啊，看，文章2"
},
{
href: "##",
text: "啊啦，不好，我把文章3忘家里了！"
},
{
href: "##",
text: "马萨噶，这就是传说中的...文章4..."
},
{
href: "##",
text: "什么嘛，就是文章5，害我白期待一场"
}
],
targetMode: "list"
});
无列表数据显示
HTML代码：无列表数据显示JS代码：$("#trigger10").powerFloat({
targetMode: "list"
});
四、简单提示的显示
输入密码：
再次输入：
HTML代码：输入密码：
再次输入：
JS代码：$(".pwdTrigger").powerFloat({
eventType: "focus",
targetMode: "remind",
targetAttr: "placeholder",
position: "1-4"
});
点击确定按钮或失去焦点后显示提示(文本框数据留空/输入奇怪字符等)：
确定
HTML代码：确定JS代码：var fnPosTri = function() {
var oPosTri = $("#posTrigger1"), vPosTri = $.trim(oPosTri.val());
if (vPosTri === "") {
oPosTri.powerFloat({
eventType: null,
targetMode: "remind",
target: "输入内容不能为空！",
position: "1-4"
}).focus();
} else if (/\W/g.test(vPosTri)) {
oPosTri.powerFloat({
eventType: null,
targetMode: "remind",
target: "只能输入英文字符、数字和下划线",
position: "1-4"
}).focus();
} else {
$.powerFloat.hide();
}
};
$("#trigger11").bind("click", fnPosTri);
$("#posTrigger1").bind("blur", fnPosTri);
四、自定义浮动提示
模拟title的tip提示显示：
摸我
我也要
还有我
HTML代码：摸我
我也要
还有我
JS代码：$(".tipTrigger").powerFloat({
offsets: {
x: -10,
y: 22
},
showDelay: 200,
hoverHold: false,
targetMode: "tip",
targetAttr: "tip",
position: "3-4"
});
右上角固定位置的操作提示层(ajax请求中提示，页面跳转中提示等)：
登录
提交
刷新
HTML代码：
登录
提交
刷新
CSS代码：.target_fixed { height:25px; padding:1px; position:fixed; _position:absolute; top:0; right:0; }JS代码：
$(".operateTrigger").click(function() {
var txt = $(this).text();
//IE6位置
if (!window.XMLHttpRequest) {
$("#targetFixed").css("top", $(document).scrollTop() + 2);
}
//创建半透明遮罩层
if (!$("#overLay").size()) {
$('<div id="overLay"></div>').prependTo($("body"));
$("#overLay").css({
width: "100%",
backgroundColor: "#000",
opacity: 0.2,
position: "absolute",
left: 0,
top: 0,
zIndex: 99
}).height($(document).height());
}
//显示操作提示，最关键核心代码
$("#targetFixed").powerFloat({
eventType: null,
targetMode: "doing",
target: "正在" + txt + "中...",
position: "1-2"
});
//定时关闭，测试用
setTimeout(function() {
$("#overLay").remove();
$.powerFloat.hide();
}, 2000);
});
五、自定义装载容器
自定义容器装载外部图片(无柔化投影)：
CSS代码：
.custom_container{position:absolute; background-color:rgba(0, 0, 0, .5); background-color:#999\9;}
.custom_container img{padding:0; position:relative; top:-5px; left:-5px;}
HTML代码：JS代码：$("#trigger12").powerFloat({
eventType: "click",
targetMode: "ajax",
targetAttr: "src",
container: $("#customContainer"),
reverseSharp: true
});
自定义容器装载页面元素：
HTML代码：JS代码：$("#trigger13").powerFloat({
eventType: "click",
targetMode: null,
targetAttr: "src",
container: $("#customContainer")
});
六、鼠标跟随效果
缩略图显示大图，同时鼠标跟随(垂直方向)：
CSS代码：.dib { display: inline-block; }HTML代码：JS代码：$("#trigger14").powerFloat({
targetMode: "ajax",
targetAttr: "href",
hoverFollow: "y",
position: "6-8"
});
缩略图显示大图，同时鼠标跟随(水平方向)：
CSS代码：.dib { display: inline-block; }HTML代码：JS代码：$("#trigger15").powerFloat({
targetMode: "ajax",
targetAttr: "href",
hoverFollow: "x",
hoverHold: false,
position: "5-7"
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
显示更多 »
$(function() {
//通过默认rel属性加载
$("#trigger1").powerFloat();
//target参数加载
$("#trigger2").powerFloat({
target: $("#targetBox")
});
//target参数为选择器
$("#trigger3").powerFloat({
target: ".target_box"
});
//rel加载图片
$("#trigger4").powerFloat({
targetMode: "ajax"
});
//target参数为图片地址
$("#trigger5").powerFloat({
target: "/image/study/s/s512/mm2.jpg",
targetMode: "ajax"
});
//加载外部HTML片段
$("#trigger6").powerFloat({
eventType: "click",
target: "study/09/html-load.html",
targetMode: "ajax"
});
//加载外部数据失败
$("#trigger7").powerFloat({
eventType: "click",
target: "/",
targetMode: "ajax"
});
//显示纯文本的下拉
$("#trigger8").powerFloat({
width: "inherit",
eventType: "click",
target: ["唐丽霞", "徐栋梁", "成霞", "王庆花", "王腊梅", "朱小丽", "束方娟", "吉回秀", "陈阳", "更多 >>"],
targetMode: "list"
});
//带链接下拉
$("#trigger9").powerFloat({
width: 250,
target: [
{
href: "##",
text: "这是文章1的说"
},
{
href: "##",
text: "啊，看，文章2"
},
{
href: "##",
text: "啊啦，不好，我把文章3忘家里了！"
},
{
href: "##",
text: "马萨噶，这就是传说中的...文章4..."
},
{
href: "##",
text: "什么嘛，就是文章5，害我白期待一场"
}
],
targetMode: "list"
});
//无列表数据显示
$("#trigger10").powerFloat({
targetMode: "list"
});
//简单的提示
$(".pwdTrigger").powerFloat({
eventType: "focus",
targetMode: "remind",
targetAttr: "placeholder",
position: "1-4"
});
//指定对象显示提示信息
var fnPosTri = function() {
var oPosTri = $("#posTrigger1"), vPosTri = $.trim(oPosTri.val());
if (vPosTri === "") {
oPosTri.powerFloat({
eventType: null,
targetMode: "remind",
target: "输入内容不能为空！",
position: "1-4"
}).focus();
} else if (/\W/g.test(vPosTri)) {
oPosTri.powerFloat({
eventType: null,
targetMode: "remind",
target: "只能输入英文字符、数字和下划线",
position: "1-4"
}).focus();
} else {
$.powerFloat.hide();
}
};
$("#trigger11").bind("click", fnPosTri);
$("#posTrigger1").bind("blur", fnPosTri);
//自定义的浮动提示，如tip效果
$(".tipTrigger").powerFloat({
offsets: {
x: -10,
y: 22
},
showDelay: 200,
hoverHold: false,
targetMode: "tip",
targetAttr: "tip",
position: "3-4"
});
//固定位置的操作提示
$(".operateTrigger").click(function() {
var txt = $(this).text();
//IE6位置
if (!window.XMLHttpRequest) {
$("#targetFixed").css("top", $(document).scrollTop() + 2);
}
//创建半透明遮罩层
if (!$("#overLay").size()) {
$('
$("#overLay").css({
width: "100%",
backgroundColor: "#000",
opacity: 0.2,
position: "absolute",
left: 0,
top: 0,
zIndex: 99
}).height($(document).height());
}
//显示操作提示
$("#targetFixed").powerFloat({
eventType: null,
targetMode: "doing",
target: "正在" + txt + "中...",
position: "1-2"
});
//定时关闭，测试用
setTimeout(function() {
$("#overLay").remove();
$.powerFloat.hide();
}, 2000);
});
//自定义容器
$("#trigger12").powerFloat({
offsets: {
x: 5,
y: 5
},
eventType: "click",
targetMode: "ajax",
targetAttr: "src",
container: $("#customContainer"),
reverseSharp: true
});
//自定义容器装载页面元素
$("#trigger13").powerFloat({
eventType: "click",
targetMode: null,
targetAttr: "src",
container: $("#customContainer")
});
//鼠标跟随显示大图
$("#trigger14").powerFloat({
targetMode: "ajax",
targetAttr: "href",
hoverFollow: "y",
position: "2-1"
});
$("#trigger15").powerFloat({
targetMode: "ajax",
targetAttr: "href",
hoverFollow: "x",
hoverHold: false,
position: "5-7"
});
});
