利用jquery實現 qtip ajax提示框



20 77 26



特效描述:利用jquery實現 qtip ajax提示框,利用jquery實現 qtip ajax提示框

代碼結構

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
<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>

3. HTML代碼

<div class="headeline"></div>
<!--演示內容開始-->
<div class="demo">
	<h2>jQuery qtip ajax提示框</h2>
	<div class="clear">&nbsp;</div>
	<a class="nameInfo fl" title="貓頭鷹" href="http://51qianduan.com/" rel="ajax/floatbox.html"><img src="images/0.jpg" width="50" height="50" alt="貓頭鷹" /></a>
	<p>
	鸮形目(貓頭鷹)是命令的猛禽,其中包括200個現存物種。的貓頭鷹大多捕獵小型哺乳動物,昆蟲和其他鳥類,雖然一些物種專門從事獵魚。大多數是孤獨的,晝伏夜出,有一些例外(<a class="nameInfo" title="如穴居貓頭鷹" href="http://51qianduan.com/" rel="ajax/floatbox.html">如穴居貓頭鷹</a>)。他們發現,在除南極洲以外的所有地區的地球,格陵蘭島和一些偏遠的島嶼。有些人,像<a class="nameInfo" title="雪鸮" href="http://51qianduan.com/" rel="ajax/floatbox.html">雪鸮</a>,甚至居住在地球上最惡劣的環境,如北極圈。
	<p>
	生活的貓頭鷹被分成兩戶人家,典型的貓頭鷹,鴟鸮,和谷倉貓頭鷹,Tytonidae。貓頭鷹有一個特點鷹獵多年。近年來,許多貓頭鷹已經從他們以前的農村棲息地,開始居住在城市地區。<a class="nameInfo" title="灰林鸮" href="http://51qianduan.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("images/footer_bg.png") 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>
<!--演示內容結束-->



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


熱門標簽: 圖片翻轉 圖片旋轉 圖片全屏 圖片淡出淡進 圖片淡出 圖片淡進 圖片延遲加載 圖片延遲 圖片加載 圖片疊加 圖片層疊 圖片放大鏡 頭像上傳 圖片上傳 二維碼 圖片拖動 圖片拖拽 圖片廣告 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 地圖 中國地圖 世界地圖 圖片放大縮小 圖片縮放 圖片大小 圖片放大 圖片縮小 圖片變大 圖片變小 帶縮略圖的幻燈片 圖片滾動 圖片滾動條 旋轉木馬 圖片旋轉木馬 文字旋轉木馬 旋轉木馬插件 圖片滑動 圖片滑塊 純圖片輪播 圖片輪播 圖片切換 圖片選項卡 圖標選項卡 圖片收縮展開 圖片收縮 圖片展開 圖標導航 圖標菜單 自動滾動圖片輪播 彈出層拖動 背景切換 大圖切換 手風琴 水平手風琴 垂直手風琴 圖片手風琴 文字手風琴 手風琴插件 滑動星星打分 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 圖表 圖片 圖片插件 頭像截圖 其他 鼠標懸停 文字提示框 提示文字 提示框/彈出層 圖片文字
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子