jquery萬能浮動層提示框插件圖片、文字、表單文字提示等提示框



140 559 187



特效描述:萬能浮動層 提示框插件 圖片文字表單 變淡文字提示,jquery插件powerFloat萬能浮動框提示制作圖片提示框、文字提示框、ajax異步內容提示框、form表單文字提示,是一款多功能jquery 提示插件、適用在一些文章內容比較多的浮動框提示。

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/common.css" type="text/css" />
<link rel="stylesheet" href="css/powerFloat.css" type="text/css" />

2. 引入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="js/jquery-powerFloat.js"></script>

3. HTML代碼

    <div class="zxx_in_box zxx_out_box zxx_main_con">
        <h1 class="zxx_title">jQuery萬能浮動框插件測試</h1>
		<div class="zxx_test_list">
			<h4 class="mb10 f11">一、加載頁面上元素</h4>
			<p><a id="trigger1" href="javascript:;" rel="targetBox">默認rel加載</a></p>
			<div class="zxx_code"><strong class="db mb5 f9">HTML代碼:</strong><xmp><a id="trigger1" href="javascript:;" rel="targetBox">默認rel加載</a></xmp></div>
			<div class="zxx_code"><strong class="db mb5 f9">JS代碼:</strong><xmp>$("#trigger1").powerFloat();</xmp></div>
		</div>
		<div class="zxx_test_list">
			<p><a id="trigger2" href="###">target參數加載</a></p>
			<div class="zxx_code"><strong class="db mb5 f9">HTML代碼:</strong><xmp><a id="trigger2" href="###">target參數加載</a></xmp></div>
			<div class="zxx_code"><strong class="db mb5 f9">JS代碼:</strong><xmp>$("#trigger2").powerFloat({
target: $("#targetBox")	
});</xmp></div>
		</div>
		<div class="zxx_test_list">
			<p><a id="trigger3" href="###">target參數為選擇器</a></p>
			<div class="zxx_code"><strong class="db mb5 f9">HTML代碼:</strong><xmp><a id="trigger3" href="###">target參數為選擇器</a></xmp></div>
			<div class="zxx_code"><strong class="db mb5 f9">JS代碼:</strong><xmp>$("#trigger3").powerFloat({
target: ".target_box"
});</xmp></div>
		</div>
		<div class="zxx_test_list">
			<h4 class="mb10 f11">二、Ajax加載外部元素</h4>
			<p><a id="trigger4" href="javascript:;" rel="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg">rel屬性顯示圖片</a></p>
			<div class="zxx_code"><strong class="db mb5 f9">HTML代碼:</strong><xmp><a id="trigger4" href="javascript:;" rel="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg">rel屬性顯示圖片</a></xmp></div>
			<div class="zxx_code"><strong class="db mb5 f9">JS代碼:</strong><xmp>$("#trigger4").powerFloat({
targetMode: "ajax"
});</xmp></div>
		</div>
		<div class="zxx_test_list">
			<p><a id="trigger5" href="javascript:;">target參數為圖片地址</a></p>
			<div class="zxx_code"><strong class="db mb5 f9">HTML代碼:</strong><xmp><a id="trigger5" href="javascript:;">target參數為圖片地址</a></xmp></div>
			<div class="zxx_code"><strong class="db mb5 f9">JS代碼:</strong><xmp>$("#trigger5").powerFloat({
target: "http://image.zhangxinxu.com/image/study/s/s512/mm2.jpg",
targetMode: "ajax"
});</xmp></div>
		</div>
		<div class="zxx_test_list">
			<p>加載外部HTML片段:<button id="trigger6">點擊切換顯示</button></p>
			<div class="zxx_code"><strong class="db mb5 f9">HTML代碼:</strong><xmp><button id="trigger6">點擊切換顯示</button></xmp></div>
			<div class="zxx_code"><strong class="db mb5 f9">JS代碼:</strong><xmp>$("#trigger6").powerFloat({
eventType: "click",
target: "/study/201009/html-load.html",
targetMode: "ajax"
});</xmp></div>
		</div>
		<div class="zxx_test_list">
			<p>加載外部頁面數據失敗:<button id="trigger7">點擊測試</button></p>
			<div class="zxx_code"><strong class="db mb5 f9">HTML代碼:</strong><xmp><button id="trigger7">點擊測試</button></xmp></div>
			<div class="zxx_code"><strong class="db mb5 f9">JS代碼:</strong><xmp>$("#trigger7").powerFloat({
eventType: "click",
target: "http://www.baidu.com/",
targetMode: "ajax"
});</xmp></div>
		</div>
		<div class="zxx_test_list">
			<h4 class="mb10 f11">三、下拉列表的顯示</h4>
			<p>純文字列表下拉:<button id="trigger8">點擊顯示姓名列表▼</button></p>
			<div class="zxx_code"><strong class="db mb5 f9">HTML代碼:</strong><xmp><button id="trigger8">點擊顯示姓名列表▼</button></xmp></div>
			<div class="zxx_code"><strong class="db mb5 f9">JS代碼:</strong><xmp>$("#trigger8").powerFloat({
width: "inherit",
eventType: "click",
target: ["唐麗霞", "徐棟梁", "成霞", "王慶花", "王臘梅", "朱小麗", "束方娟", "吉回秀", "陳陽", "<a href='##'>更多 >></a>"],
targetMode: "list"	
});</xmp></div>
		</div>
		<div class="zxx_test_list">
			<p>帶鏈接的文字下拉:<a id="trigger9" href="/wordpress/">更多文章▼</a></p>
			<div class="zxx_code"><strong class="db mb5 f9">HTML代碼:</strong><xmp><a id="trigger9" href="/wordpress/">更多文章▼</a></xmp></div>
			<div class="zxx_code"><strong class="db mb5 f9">JS代碼:</strong><xmp>$("#trigger9").powerFloat({
width: 250,
target: [
	{
		href: "##",
		text: "這是文章1的說"	
	},
	{
		href: "##",
		text: "啊,看,文章2"	
	},
	{
		href: "##",
		text: "啊啦,不好,我把文章3忘家里了!"	
	},
	{
		href: "##",
		text: "馬薩噶,這就是傳說中的...文章4..."	
	},
	{
		href: "##",
		text: "什么嘛,就是文章5,害我白期待一場"	
	}
],
targetMode: "list"	
});</xmp></div>
		</div>
		<div class="zxx_test_list">
			<p><a id="trigger10" href="#">無列表數據顯示</a></p>
			<div class="zxx_code"><strong class="db mb5 f9">HTML代碼:</strong><xmp><a id="trigger10" href="#">無列表數據顯示</a></xmp></div>
			<div class="zxx_code"><strong class="db mb5 f9">JS代碼:</strong><xmp>$("#trigger10").powerFloat({
targetMode: "list"	
});</xmp></div>
		</div>
		<div class="zxx_test_list">
			<h4 class="mb10 f11">四、簡單提示的顯示</h4>
			<p>輸入密碼:<input class="pwdTrigger" type="password" placeholder="6~20個字符" /></p>
			<p class="mt5">再次輸入:<input class="pwdTrigger" type="password" placeholder="輸入與上面一樣的密碼" /></p>
			<div class="zxx_code"><strong class="db mb5 f9">HTML代碼:</strong><xmp>輸入密碼:<input class="pwdTrigger" type="password" placeholder="6~20個字符" />
再次輸入:<input class="pwdTrigger" type="password" placeholder="輸入與上面一樣的密碼" /></xmp></div>
			<div class="zxx_code"><strong class="db mb5 f9">JS代碼:</strong><xmp>$(".pwdTrigger").powerFloat({
eventType: "focus",
targetMode: "remind",
targetAttr: "placeholder",
position: "1-4"
});</xmp></div>
		</div>
		<div class="zxx_test_list">
			<p>點擊確定按鈕或失去焦點后顯示提示(文本框數據留空/輸入奇怪字符等):</p><p class="mt5"><input id="posTrigger1" type="text" /> <button id="trigger11">確定</button></p>
			<div class="zxx_code"><strong class="db mb5 f9">HTML代碼:</strong><xmp><input id="posTrigger1" type="text" /> <button id="trigger11">確定</button></xmp></div>
			<div class="zxx_code"><strong class="db mb5 f9">JS代碼:</strong><xmp>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);</xmp></div>
		</div>
		<div class="zxx_test_list">
			<h4 class="mb10 f11">四、自定義浮動提示</h4>
			<p>
				模擬title的tip提示顯示:
				<a class="tipTrigger" href="###" tip="摸我">摸我</a>
				<a class="tipTrigger" href="###" tip="我也要">我也要</a>
				<a class="tipTrigger" href="###" tip="還有我">還有我</a>
			</p>
			<div class="zxx_code"><strong class="db mb5 f9">HTML代碼:</strong><xmp><a class="tipTrigger" href="###" tip="摸我">摸我</a>
<a class="tipTrigger" href="###" tip="我也要">我也要</a>
<a class="tipTrigger" href="###" tip="還有我">還有我</a></xmp></div>
			<div class="zxx_code"><strong class="db mb5 f9">JS代碼:</strong><xmp>$(".tipTrigger").powerFloat({
offsets: {
	x: -10,
	y: 22
},
showDelay: 200,
hoverHold: false,
targetMode: "tip",
targetAttr: "tip",
position: "3-4"
});</xmp></div>
		</div>
		<div class="zxx_test_list">
			<p>右上角固定位置的操作提示層(ajax請求中提示,頁面跳轉中提示等):</p>
			<p class="mt5">
				<span id="targetFixed" class="target_fixed"></span>
				<button class="operateTrigger">登錄</button>
				<button class="operateTrigger">提交</button>
				<button class="operateTrigger">刷新</button>
			</p>
			<div class="zxx_code"><strong class="db mb5 f9">HTML代碼:</strong><xmp><span id="targetFixed" class="target_fixed"></span>
<button class="operateTrigger">登錄</button>
<button class="operateTrigger">提交</button>
<button class="operateTrigger">刷新</button></xmp></div>
			<div class="zxx_code"><strong class="db mb5 f9">CSS代碼:</strong><xmp>.target_fixed { height:25px; padding:1px; position:fixed; _position:absolute; top:0; right:0; }</xmp></div>
			<div class="zxx_code"><strong class="db mb5 f9">JS代碼:</strong><pre>$(".operateTrigger").click(function() {
var txt = $(this).text();
<span style="color:green;">//IE6位置</span>
if (!window.XMLHttpRequest) {
	$("#targetFixed").css("top", $(document).scrollTop() + 2);	
}
<span style="color:green;">//創建半透明遮罩層</span>
if (!$("#overLay").size()) {
	$('&lt;div id="overLay">&lt;/div>').prependTo($("body"));
	$("#overLay").css({
		width: "100%",
		backgroundColor: "#000",
		opacity: 0.2,
		position: "absolute",
		left: 0,
		top: 0,
		zIndex: 99
	}).height($(document).height());
}
<span style="color:green;">//顯示操作提示,最關鍵核心代碼</span>
$("#targetFixed").powerFloat({
	eventType: null,
	targetMode: "doing",	
	target: "正在" + txt + "中...",
	position: "1-2"
});
<span style="color:green;">//定時關閉,測試用</span>
setTimeout(function() {
	$("#overLay").remove();
	$.powerFloat.hide();
}, 2000);
});</pre></div>
		</div>
		<div class="zxx_test_list">
			<h4 class="mb10 f11">五、自定義裝載容器</h4>
			<div id="customContainer" class="custom_container"></div>
			<p>自定義容器裝載外部圖片(無柔化投影):<input id="trigger12" type="button" src="http://image.zhangxinxu.com/image/study/s/s256/mm10.jpg" value="點擊我" /></p>
			<div class="zxx_code"><strong class="db mb5 f9">CSS代碼:</strong><pre>.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;}</pre></div>
			<div class="zxx_code"><strong class="db mb5 f9">HTML代碼:</strong><xmp><div id="customContainer" class="custom_container"></div>
<input id="trigger12" type="button" src="http://image.zhangxinxu.com/image/study/s/s256/mm10.jpg" value="點擊我" /></xmp></div>
			<div class="zxx_code"><strong class="db mb5 f9">JS代碼:</strong><xmp>$("#trigger12").powerFloat({
eventType: "click",
targetMode: "ajax",
targetAttr: "src",
container: $("#customContainer"),
reverseSharp: true
});</xmp></div>
		</div>
		<div class="zxx_test_list">
			<p>自定義容器裝載頁面元素:<input id="trigger13" type="button" src="targetBox" value="點擊我" /></p>
			<div class="zxx_code"><strong class="db mb5 f9">HTML代碼:</strong><xmp><input id="trigger13" type="button" src="targetBox" value="點擊我" /></xmp></div>
			<div class="zxx_code"><strong class="db mb5 f9">JS代碼:</strong><xmp>$("#trigger13").powerFloat({
eventType: "click",
targetMode: null,
targetAttr: "src",
container: $("#customContainer")
});</xmp></div>
		</div>
		<div class="zxx_test_list">
			<h4 class="mb10 f11">六、鼠標跟隨效果</h4>
			<p class="mb10">縮略圖顯示大圖,同時鼠標跟隨(垂直方向):</p>
			<a class="dib" id="trigger14" href="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg">
				<img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
			</a>
			<div class="zxx_code"><strong class="db mb5 f9">CSS代碼:</strong><xmp>.dib { display: inline-block; }</xmp></div>
			<div class="zxx_code"><strong class="db mb5 f9">HTML代碼:</strong><xmp><a class="dib" id="trigger14" href="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg">
<img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
</a></xmp></div>
			<div class="zxx_code"><strong class="db mb5 f9">JS代碼:</strong><xmp>$("#trigger14").powerFloat({
targetMode: "ajax",
targetAttr: "href",
hoverFollow: "y",
position: "6-8"
});</xmp></div>
		</div>
		<div class="zxx_test_list">
			<p class="mb10">縮略圖顯示大圖,同時鼠標跟隨(水平方向):</p>
			<a class="dib" id="trigger15" href="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg">
				<img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
			</a>
			<div class="zxx_code"><strong class="db mb5 f9">CSS代碼:</strong><xmp>.dib { display: inline-block; }</xmp></div>
			<div class="zxx_code"><strong class="db mb5 f9">HTML代碼:</strong><xmp><a class="dib" id="trigger15" href="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg">
<img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
</a></xmp></div>
			<div class="zxx_code"><strong class="db mb5 f9">JS代碼:</strong><xmp>$("#trigger15").powerFloat({
targetMode: "ajax",
targetAttr: "href",
hoverFollow: "x",
hoverHold: false,
position: "5-7"
});</xmp></div>
		</div>
    </div>
<div id="targetBox" class="shadow target_box dn">
	<div class="target_list">
    	<a href="javascript:;">1</a>
        <a href="javascript:;">2</a>
        <a href="javascript:;">3</a>
        <a href="javascript:;">4</a>
        <a href="javascript:;">5</a>
        <a href="javascript:;">6</a>
        <a href="javascript:;">7</a>
        <a href="javascript:;">8</a>
    </div>
    <div class="target_list">
    	<a href="javascript:;">9</a>
        <a href="javascript:;">10</a>
        <a href="javascript:;">11</a>
        <a href="javascript:;">12</a>
        <a href="javascript:;">13</a>
        <a href="javascript:;">14</a>
        <a href="javascript:;">15</a>
        <a href="javascript:;">16</a>
    </div>
    <div class="target_list" style="border-bottom:0;">
        <a href="javascript:;">17</a>
        <a href="javascript:;">18</a>
        <a href="javascript:;">19</a>
        <a href="javascript:;">20</a>
    </div>
    <a href="##" class="r mr5 target_more">顯示更多 ?</a>
</div>
<script>
$(function() {
	//通過默認rel屬性加載
	$("#trigger1").powerFloat();
	//target參數加載
	$("#trigger2").powerFloat({
		target: $("#targetBox")	
	});
	//target參數為選擇器
	$("#trigger3").powerFloat({
		target: ".target_box"
	});
	//rel加載圖片
	$("#trigger4").powerFloat({
		targetMode: "ajax"
	});
	//target參數為圖片地址
	$("#trigger5").powerFloat({
		target: "http://image.zhangxinxu.com/image/study/s/s512/mm2.jpg",
		targetMode: "ajax"
	});
	//加載外部HTML片段
	$("#trigger6").powerFloat({
		eventType: "click",
		target: "study/201009/html-load.html",
		targetMode: "ajax"
	});
	//加載外部數據失敗
	$("#trigger7").powerFloat({
		eventType: "click",
		target: "http://www.baidu.com/",
		targetMode: "ajax"	
	});
	//顯示純文本的下拉
	$("#trigger8").powerFloat({
		width: "inherit",
		eventType: "click",
		target: ["唐麗霞", "徐棟梁", "成霞", "王慶花", "王臘梅", "朱小麗", "束方娟", "吉回秀", "陳陽", "<a href='##'>更多 >></a>"],
		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()) {
			$('<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);
	});
	//自定義容器
	$("#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"
	});
});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 浮動提示框 切換按鈕 表單 表單美化 表單插件 表單美化插件 圖片廣告 文本框 text文本框
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子