简介

jquery.ipicture.js是一款给图片或指定区域做标记的插件。

插件特定：

1、弹出层tips可以以滑动展开；

2、弹出层tips可以以图文形式显示。

使用

1.  引入 iPicture.css 、 jquery.js 和 jquery.ipicture.js 文件

2.  HTML

<div id="iPicture" data-interaction="hover">
	<div class="ip_slide">
		<!-- 本身的图片 -->
		<img class="ip_tooltipImg" src="images/mypic.jpg" />
		<!-- tips 1 从下往上 -->
		<div class="ip_tooltip ip_img32" style="top: 330px; left: 418px;" data-tooltipbg="bgblack" data-round="roundBgW" data-animationtype="btt-slide">
			<p><b>一艘潜艇</b><br/>链接到：<a href="http://www.baidu.com">百度</a></p>
		</div>
		<!-- tips 2 从左往右 -->
		<div class="ip_tooltip ip_img32" style="top: 60px; left: 558px;" data-button="moreblue" data-tooltipbg="bgblack" data-round="roundBgW" data-animationtype="rtl-slide">
			<p><img src="images/s1.jpg" alt="" ></p>
		</div>
		<!-- tips 3 从右往左 -->
		<div class="ip_tooltip ip_img32" style="top: 260px; left: 228px;" data-button="moreblue" data-tooltipbg="bgblack" data-round="roundBgW" data-animationtype="ltr-slide">
			<p><b></b><br/>有一座桥，全长688米。</p>
		</div>
	</div>
</div>

3.  调用

<script type="text/javascript">
	$( "#iPicture" ).iPicture();
</script>

相关链接

在线演示地址：http://www.jqueryfuns.com/resource/view/1452