第97款插件：jquery.ipicture.js在地图上做标记并可以用图文及链接展示

一、插件介绍

昨天朋友给我打了一个电话，说是想要在一个图片的地图上做标记。我一下想到了这一个插件，本人以前是碰到过这个插件，但是觉得也没什么用处，于是也没有收录。后来好好想一想，其实它的用下蛮大的。我想了一下有以下几个用处：

1、给企业的地图图片上，做一些明显的标记，展示地图的形象；

2、给DIV图层上，做一些标记。这个DIV可以是地图，可以是图片。

这个插件有以下特点：

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

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

二、插件图片示例

三、插件作者下载地址

作者：Sara D'Alia
版本：iPicture² 1.0.0

四、兼容性

兼容 jQuery 1.7+，建议使用 1.9+ 版本，效率更高。

IE8+ ✔	Chrome ✔	Firefox ✔	Opera ✔	Safari ✔

五、最简使用教程

JS引用代码：

<link rel="stylesheet" type="text/css" media="screen" href="css/iPicture.css"/>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.ipicture.js"></script>

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>
<script type="text/javascript">
	$( "#iPicture" ).iPicture();
</script>

注意：$( "#iPicture" ).iPicture();  只能放在<div id="iPicture"></div>的后边。或者文件的结尾！

六、参数说明

class="ip_tooltip ip_img32"   
这里说明ip_tooltip指的tip的绝对定位，ip_img32指的那个闪动的白点点的背景图的绝对定位，
有三种大小：ip_img32,ip_img24,ip_big24

style="top: 330px; left: 418px;" 指的是白点点的位置

data-tooltipbg="bgblack" 指的是tip的背景，默认有两种颜色 ，白色 bgwhite，黑色 bgblack

data-round="roundBgW" 指的是背后闪动的白点点的位置，

roundBgW是的是白色的由内向外闪动,默认大小30px

roundBgWIn是白色的由外向内闪动，默认大小24px

roundBgWInner是的是白色的由内向外闪动,只不过比roundBgWin更向内小一些，默认大小为20px

data-animationtype="btt-slide"  ，指的是 滑动 的形式，共有四种形式。

btt-slide ，指的是 bottom to top 由下向上滑动

ttb-silde ，指的是 top to bottom 由上向下滑动

ltr-slide， 指的是 left to right 由左向右滑动

rtl-slide， 指的是 right to left 由右向左滑动。