jquery图像标注式提示插件adhere js代码

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

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

以下是 jquery图像标注式提示插件adhere js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="en">
<head>
	<title>jqueryͼ���עʽ��ʾ���adhere</title>
	<meta charset="gb2312" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">	
	<!--[if lt IE 9]>
	<!-- <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> -->
	<![endif]-->	
	<!--[if lt IE 7]><![endif]-->
	<!--[if IE]><![endif]-->
	<link rel="stylesheet" type="text/css" href="css/reset.css" />
	<link rel="stylesheet" type="text/css" href="css/styles.css" />	
	<script type="text/javascript" src="js/jquery.1.4.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.adhere.min.js"></script>	
</head>

<body>
	<div id="wrapper">
		<header>
			<h1><a href="#" title="adhere.js homepage"><img src="images/adhere_logo.png" width="80" height="46" alt="adhere.js" /><span>adhere.js</span></a></h1>
			<p>A jQuery plugin that takes a no-database approach to image annotation positioning.</p>
		</header>
		
		<section class="example">
			<h2 class="center">Basic Usage</h2>
			<h3 class="center"><strong>Example 1</strong>: SPCB Survey Website. Hover over the red markers.</h3>
			<section class="adhere" id="ex1-ah-450-375">
				<figure>
					<img src="images/spcb_survey.png" width="450" height="375" alt="SPCB Survey Site" />
				</figure>
				<ul>
					<li data-coords="ah-239-29">School Seal / Logo</li>				
					<li data-coords="ah-100-11">User Comments</li>
					<li data-coords="ah-359-111">Main Question</li>
					<li data-coords="ah-77-142">Class Sections</li>
					<li data-coords="ah-293-234">User Contact Info</li>
					<li data-coords="ah-396-357">Link to Reports</li>
				</ul>
			</section>
			
			<section class="breakdown">
				<h3>The Initialization</h3>				
				<pre><code>$(".adhere").adhere({
  captionContainer:'ul',
  collapseList:true,
  marker:{xAlign: 'center', yAlign:'center', html:'<span class="img-marker"></span>'},
  caption:{className:'caption', xAlign:'center', yAlign:'top'}
});</code></pre>
			
				<h3>The Markup</h3>
				
				<pre><code>&lt;section class=&quot;adhere&quot; id=&quot;ex1-ah-450-375&quot;&gt;
  &lt;figure&gt;
    &lt;img src=&quot;images/spcb_survey.png&quot; width=&quot;370&quot; height=&quot;308&quot; alt=&quot;SPCB Survey Site&quot; /&gt;
  &lt;/figure&gt;
  &lt;ul&gt;
    &lt;li data-coords=&quot;ah-239-29&quot;&gt;School Seal / Logo&lt;/li&gt;				
    &lt;li data-coords=&quot;ah-100-11&quot;&gt;Survey User Comments&lt;/li&gt;
    &#8230;
    &lt;li data-coords=&quot;ah-396-357&quot;&gt;Link to Reports&lt;/li&gt;
  &lt;/ul&gt;
&lt;/section&gt;
</code></pre>				
			</section>
		</section>
		
		<footer>
		</footer>
	</div>
		<script type="text/javascript">
		$(document).ready(function(){
			$(".adhere").adhere({
				captionContainer:'ul',
				collapseList:true,
				marker:{xAlign: 'center', yAlign:'top', html:'<span class="img-marker"></span>'},
				caption:{className:'caption', xAlign:'left', yAlign:'center'}
			});		
		});
	</script>
</body>
</html>

CSS代码(reset.css):

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,figure,caption,section,header,footer,nav{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
/* remember to define focus styles! */
:focus{outline:0;}
body{font:62.5%/1 Georgia,"Times New Roman",Times,serif;color:#555;}
ol,ul{list-style:none;list-style-position:outside;}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
a,a:link,a:visited{color:#39b339;text-decoration:none;}
a:hover{color:#8666a7;}
a:active{color:#4f8ecd;}
pre{font-family:monospace;}
h1,h2,h3,h4,h5,p,li{color:#555;}
strong{font-weight:bold;}

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