夏日博客

A-A+

jquery在图片上面描点的插件(Giga Image Viewer)

2016年01月10日 前端设计 暂无评论 阅读 8 views 次

Giga Image Viewer插件是基于jquery的一个描点插件了,我们可以利用它来在图片实现描点效果,下面我们一起来看看例子吧,我就把代码都down下来,并且处理了一下,其实作者还是提供了很多方便的API,业界良心呀.

  1. $(document).ready(function(){  
  2.     var settings = {  
  3.         'viewportWidth' : '100%',  
  4.         'viewportHeight' : '100%',  
  5.         'fitToViewportShortSide' : true,    
  6.         'contentSizeOver100' : false,  
  7.         'startScale' : .5,  //注意是.+数字  
  8.         'startX' : 1860,  
  9.         'startY' : 2830,  
  10.         'animTime' : 500,  
  11.         'draggInertia' : 10,  
  12.         'imgDir' : 'images/', //图片的目录  
  13.         'mainImgWidth' : 5000,  
  14.         'mainImgHeight' : 5000,  
  15.         'intNavEnable' : true,  
  16.         'intNavPos' : 'B',  
  17.         'intNavAutoHide' : false,  
  18.         'intNavMoveDownBtt' : true,  
  19.         'intNavMoveUpBtt' : true,  
  20.         'intNavMoveRightBtt' : true,  
  21.         'intNavMoveLeftBtt' : true,  
  22.         'intNavZoomBtt' : true,  
  23.         'intNavUnzoomBtt' : true,  
  24.         'intNavFitToViewportBtt' : true,  
  25.         'intNavFullSizeBtt' : true,  
  26.         'intNavBttSizeRation' : 1,  
  27.         'mapEnable' : true,  
  28.         'mapPos' : 'BL',  
  29.         'popupShowAction' : 'click',  
  30.         'testMode' : false  
  31.     };  
  32.        
  33.     $('#myDiv').lhpGigaImgViewer(settings, 'MyHotspots');  
  34. });  

参数真心多,还有一个必须的,代码如下:

  1. <span class="comment"><!-- viewer container --></span>  
  2. <div id="myDiv" style="width:960px; height:600px; overflow:hidden; border:solid 1px #a6a6a6; background:#000;"></div>  
  3.    
  4. <span class="comment"><!-- hotspots container --></span>  
  5. <div id="MyHotspots" style="display:none;">    
  6.        
  7.     <span class="comment"><!-- hotspot --></span>  
  8.     <div class="lhp_giv_hotspot" data-x="1597" data-y="2569" data-visible-scale=".4">  
  9.         <span class="comment"><!-- marker --></span>  
  10.         <div class="lhp_giv_marker pos-BR">  
  11.             <img src="gfx/arrow2.png" style="float:right;" />  
  12.             <span class="label">Click me <span>#2</span></span>  
  13.         </div>  
  14.         <span class="comment"><!-- pop-up --></span>  
  15.         <div class="lhp_giv_popup pos-R">  
  16.             <div class="content">  
  17.                 <span>Lorem ipsum #2</span><br/>  
  18.                 <img src="gfx/popupImg1.jpg" />  
  19.                 Lorem ipsum dolor sit amet, consectetur adipisicing elit...  
  20.             </div>  
  21.         </div>  
  22.     </div>  
  23.     <span class="comment"><!-- hotspot --></span>  
  24.     ...  
  25. </div>  

这样的话，这要修改下面的HTML功能就可以在地图上面描点了，看一下代码你就懂怎么描点的，我就不多少了。

标签：

给我留言