建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

给图片或指定区域做标记的JQuery插件jquery.ipicture.js

来源:易助科技网浏览量:13收藏

简介


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


给图片或指定区域做标记的JQuery插件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://ipicture.justmybit.com/index.php

GitHub 地址 :  https://github.com/vincicat/jQuery-iPicture

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