jQuery qtip浮動提示框插件新浪微博圖片或文字ajax提示框



127 504 169



特效描述:浮動提示框插件 微博圖片文字 ajax提示框,jQuery qtip提示框插件制作5種常用的頁面浮動提示框,通過鼠標滑過或點擊觸發浮動提示框,類似新浪微波滑過圖片異步加載ajax提示框詳細信息,等多種文字和圖片提示框效果。

代碼結構

1. 引入JS

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.qtip-1.0.0-rc3.js"></script>

2. HTML代碼

<div class="demo">
	<div class="demobtn">
		<a href="demo1.html" target="_blank">1、簡單的圖片提示</a>
		<a href="demo2.html" target="_blank">2、簡單的文本提示</a>
		<a href="demo3.html" target="_blank">3、擴展彈出層提示</a>
		<a href="demo4.html" target="_blank">4、websnapr提示網站首頁截圖</a>
	</div>
	<h2>jQuery qtip ajax提示框</h2>
	<div class="clear">&nbsp;</div>
	<a class="nameInfo fl" title="貓頭鷹" href="http://www.jsfoot.com/" rel="ajax/floatbox.html"><img src="images/0.jpg" width="50" height="50" alt="貓頭鷹" /></a>
	<p>鸮形目(貓頭鷹)是命令的猛禽,其中包括200個現存物種。的貓頭鷹大多捕獵小型哺乳動物,昆蟲和其他鳥類,雖然一些物種專門從事獵魚。大多數是孤獨的,晝伏夜出,有一些例外(<a class="nameInfo" title="如穴居貓頭鷹" href="http://www.jsfoot.com/" rel="ajax/floatbox.html">如穴居貓頭鷹</a>)。他們發現,在除南極洲以外的所有地區的地球,格陵蘭島和一些偏遠的島嶼。有些人,像<a class="nameInfo" title="雪鸮" href="http://www.jsfoot.com/" rel="ajax/floatbox.html">雪鸮</a>,甚至居住在地球上最惡劣的環境,如北極圈。
	<p>生活的貓頭鷹被分成兩戶人家,典型的貓頭鷹,鴟鸮,和谷倉貓頭鷹,Tytonidae。貓頭鷹有一個特點鷹獵多年。近年來,許多貓頭鷹已經從他們以前的農村棲息地,開始居住在城市地區。<a class="nameInfo" title="灰林鸮" href="http://www.jsfoot.com/" rel="ajax/floatbox.html">灰林鸮</a>已成為普遍的游客約四十年,在英國各地的城市,它的生存鴿子和小鳥的飲食。在城市地區也被稱為貓頭鷹捕食新出生的小貓。</p>
</div>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;font-style:normal;}
a,img{border:0;}
a,a:visited{color:#5e5e5e; text-decoration:none;}
a:hover{color:#4183C4;text-decoration:underline;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-table;}/* Hides from IE-mac \*/
*html .clearfix{height:1%;}
.clearfix{display:block;}/* End hide from IE-mac */
*+html .clearfix{min-height:1%;}
.clear{height:0;overflow:hidden;clear:both;display:block;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋體";}	
/* demo */
.demo{width:950px;margin:20px auto;}
.demo h2{color:#8FD401;font-size:16px;height:40px;text-align:center;}
.demo p{line-height:22px;margin-bottom:20px;}
.demo p a{color:#3366cc;margin:0 5px;font-weight:800;font-size:14px;}
.demo .fl{float:left;}
.demo img{border:1px solid #555555;margin:5px 15px 0 0;padding:3px;}
/* demobtn */
.demobtn{padding:20px 10px 40px 10px;}
.demobtn a{display:inline-block;height:24px;line-height:24px;font-size:14px;padding:5px 0;text-align:center;width:210px;}
/* qtip 提示框基礎樣式 */
.qtip .qtip-content{padding:10px;overflow:hidden;}
.qtip .qtip-content .qtip-title,.qtip-cream .qtip-content .qtip-title{background-color:#F0DE7D;}
.qtip-light .qtip-content .qtip-title{background-color:#f1f1f1;}
.qtip-dark .qtip-content .qtip-title{background-color:#404040;}
.qtip-red .qtip-content .qtip-title{background-color:#F28279;}
.qtip-green .qtip-content .qtip-title{background-color:#B9DB8C;}
/* name_card */
.name_card{background:url("http://img.t.sinajs.cn/t5/style/images/common/footer_bg.png?id=1345196970876") no-repeat -230px bottom;_background:none;}
.name_card .W_vline{color:#999;}
/* name_card name */
.name_card .name dt,.name_card .name dd,.name_card .info dt,.name_card .info dd{float:left;display:inline;}
.name_card .name{padding:20px 20px 10px;zoom:1;}
.name_card .name dt img{height:50px;display:block;border-radius: 2px;}
.name_card .name dd{margin:-4px 0 0 10px;line-height:20px;}
.name_card .name dd span{padding:0 10px 0 0;}
.name_card .name dd p{width:260px;word-wrap:break-word;}
.name_card .name dd div{width: 210px}.
.name_card .name .address img{margin:0 0 0 3px;}
/* name_card info */
.name_card .info{margin:0 20px 8px;line-height:18px;width:330px;}
.name_card .info dd{width:294px;margin-bottom:2px;word-wrap:break-word;}
.name_card .info dd a{display:inline-block;}
.name_card .info li.honour{padding-top:5px;float:left;margin-right:10px;height:24px}
/* name_card links */
.name_card .links{margin:0;padding:6px 20px 10px;overflow:hidden}
.name_card .links .W_vline{margin:0 3px;}
.name_card .links .W_btn_c{float:right;display:inline;}
.name_card .links p{float:left;display:inline-block;margin-top:4px}
.name_card .links p .W_chat_stat{display:inline-block;width:7px;height:7px;border-width:1px;border-style:solid;border-radius:2px;overflow:hidden;}
.name_card .links p .W_chat_stat_online{margin-right:5px;background-color:#8FDC00;border-color:#48C000;}
/* name_card userdata */
.name_card .userdata{width:270px}
.name_card .userdata li{float:left}
.name_card .userdata li.W_vline{margin:0 8px;}
</style>
<script class="example" type="text/javascript">
// 創建工具提示文件加載
$(document).ready(function(){
	// 使用each()方法來獲得每個元素的屬性
	$('.nameInfo').each(function(){
		$(this).qtip({
			content: {
				// 設置您要使用的文字圖像的HTML字符串,正確的src URL加載圖像
				text: '<img class="throbber" src="images/throbber.gif" alt="Loading..." />',
				url: $(this).attr('rel'), // 使用的URL加載的每個元素的rel屬性
				title:{
					text: $(this).attr("title"), // 給工具提示使用每個元素的文本標題
					button: '關閉' // 在標題中顯示關閉文字按鈕
				}
			},
			position: {
				corner: {
					target: 'bottomMiddle', // 定位上面的鏈接工具提示
					tooltip: 'topMiddle'
				},
				adjust: {
					screen: true // 在任何時候都保持提示屏幕上的
				}
			},
			show: { 
				when: 'mouseover', //或click 
				solo: true // 一次只顯示一個工具提示
			},
			hide: 'unfocus',
			style: {
				tip: true, // 設置一個語音氣泡提示在指定工具提示角落的工具提示
				border: {
					width: 0,
					radius: 4
				},
				name: 'light', // 使用默認的淡樣式
				width: 390 // 設置提示的寬度
			}
		})
	});
});
</script>



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


熱門標簽: 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 滑動星星打分 浮動提示框 其他 圖片廣告 提示框/彈出層 跳轉 鼠標滑過 鼠標懸停 跟隨鼠標移動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子