一、插件介绍
昨天朋友给我打了一个电话,说是想要在一个图片的地图上做标记。我一下想到了这一个插件,本人以前是碰到过这个插件,但是觉得也没什么用处,于是也没有收录。后来好好想一想,其实它的用下蛮大的。我想了一下有以下几个用处:
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 由右向左滑动。