jquery+css3图像标注悬浮说明

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery+css3图像标注悬浮说明的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery+css3ͼ���ע����˵��</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/osblogger.css">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div class="container">
	<div class="labels">
		<a id="label1" class="label" href="#">Sofa
		<p>A sofa, is an item of furniture designed to seat more than one person, and providing support for the back and arms.</p>
		<span />
		</a>
		<a id="label2" class="label" href="#">Television
		<p>Television (TV) is a telecommunication medium for transmitting and receiving moving images that can be monochrome (black-and-white) or colored, with or without accompanying sound.</p>
		<span />
		</a>
		<a id="label3" class="label" href="#">Carpet
		<p>Carpet is a textile floor of an upper layer attached to a backing.</p>
		<span />
		</a>
		<a id="label4" class="label" href="#">Chair
		<p>Chair is an item of furniture designed to seat one person, and providing support for the back and arms.</p>
		<span />
		</a>
		<a id="label5" class="label" href="#">Showcase
		<p>Showcase is used to showcase things at home</p>
		<span />
		</a>
	</div>
	<div class="description"><p></p><a class="close">X</a></div>
</div>
</body>
</html>

JS代码(main.js):

jQuery(function(){
	// initialize of labels $('.labels a#label1').fadeIn(100).effect('bounce',{
	times:3}
,300,function(){
	$('.labels a#label2').fadeIn(100).effect('bounce',{
	times:3}
,300,function(){
	$('.labels a#label3').fadeIn(100).effect('bounce',{
	times:3}
,300,function(){
	$('.labels a#label4').fadeIn(100).effect('bounce',{
	times:3}
,300,function(){
	$('.labels a#label5').fadeIn(100).effect('bounce',{
	times:3}
,300,function(){
	$('.labels a#label6').fadeIn(100).effect('bounce',{
	times:3}
,300);
}
);
}
);
}
);
}
);
}
);
	// description close $('.description .close').click(function(){
	$(this).parent().fadeOut(500);
	return false;
}
);
	// display description on click by labels $('.labels a').click(function(){
	$('.description p').html( $(this).find('p').html() ).parent().fadeIn(500);
	return false;
}
);
	// close dialog on click outside $('.container').click(function(){
	$('.description').fadeOut(500);
}
);
}
);

CSS代码(style.css):

html{background:#ffffff;font-size:75%;font-family:"Open Sans","Helvetica Neue",Helvetica,sans-serif;}
body{font-family:"Open Sans",Segoe,"Segoe UI",Candara,Calibri,Arial,sans-serif;margin:0;padding:0;font-weight:700;width:100%;height:100%;}
.title{font-size:20px;color:#333333;width:400px;text-align:center;margin:3% auto;}
.container{background:url("bg1.png") no-repeat scroll center top transparent;color:#000000;height:535px;margin:20px auto;border:10px solid #333;overflow:hidden;position:relative;width:1000px;position:relative;-webkit-box-shadow:0 2px 8px rgba(0,0,0,0.3),0 0 50px rgba(0,0,0,0.1) inset;-moz-box-shadow:0 2px 8px rgba(0,0,0,0.3),0 0 50px rgba(0,0,0,0.1) inset;box-shadow:0 2px 8px rgba(0,0,0,0.3),0 0 50px rgba(0,0,0,0.1) inset;}
.description{background-color:rgba(230,145,23,0.9);color:#FFFFFF;display:none;height:140px;left:343px;line-height:24px;padding:100px 30px;position:absolute;text-align:center;top:97px;width:280px;z-index:10;-moz-border-radius:170px;-ms-border-radius:170px;-o-border-radius:170px;-webkit-border-radius:170px;border-radius:170px;}
.description .close{background-color:#808080;cursor:pointer;font-size:22px;font-weight:bold;height:36px;line-height:36px;position:absolute;right:10px;top:60px;width:36px;-moz-border-radius:18px;-ms-border-radius:18px;-o-border-radius:18px;-webkit-border-radius:18px;border-radius:18px;}
.labels p{display:none;}
.labels a{background-color:rgba(230,145,23,0.8);color:#FFFFFF;display:none;height:50px;padding:30px 0 0;position:absolute !important;text-align:center;text-decoration:none;width:80px;-moz-border-radius:40px;-ms-border-radius:40px;-o-border-radius:40px;-webkit-border-radius:40px;border-radius:40px;}
.labels > a{background-color:rgba(230,145,23,0.8);-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;-webkit-transition:.3s;transition:.3s;}
.labels a:hover{background-color:rgba(128,128,128,0.8);}
.labels a span{border-left:10px solid transparent;border-right:10px solid transparent;border-top:15px solid rgba(230,145,23,0.8);bottom:-14px;height:0;left:30px;position:absolute;width:0;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;-webkit-transition:.3s;transition:.3s;}
.labels a:hover span{border-top:15px solid rgba(128,128,128,0.8);}
#label1{left:800px;top:350px;}
#label2{left:350px;top:210px;}
#label3{left:450px;top:400px;}
#label4{left:170px;top:335px;}
#label5{left:570px;top:160px;}
#label6{left:275px;top:30px;}

附件:下载该文件资源,减少时间成本(增值服务)