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



122 487 163



特效描述:浮动提示框插件 微博图片文字 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

加群请备注:从官网了解到