首页>>Jquery图片>>iPictrue:图片标注提示(2013-10-28)

iPictrue:图片标注提示

本例css和js插件请到演示页面查看

iPictrue:图片标注提示
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

XML/HTML Code
  1. <div class="demo">  
  2.           
  3.         <div id="iPicture" data-interaction="hover">  
  4.             <div class="ip_slide">  
  5.                 <img class="ip_tooltipImg" src="images/mypic.jpg">  
  6.                 <div class="ip_tooltip ip_img32" style="top: 330px; left: 418px;" data-tooltipbg="bgblack" data-round="roundBgW" data-animationtype="btt-slide">  
  7.                 <p><b>游艇</b><br/></p>  
  8.                 </div>  
  9.                   
  10.                 <div class="ip_tooltip ip_img32" style="top: 60px; left: 558px;" data-button="moreblue" data-tooltipbg="bgblack" data-round="roundBgW" data-animationtype="rtl-slide">  
  11.                 <p><b>高楼</b><br/></p>  
  12.                 </div>  
  13.                   
  14.                 <div class="ip_tooltip ip_img32" style="top: 260px; left: 228px;" data-button="moreblue" data-tooltipbg="bgblack" data-round="roundBgW" data-animationtype="ltr-slide">  
  15.                 <p><b>测试标题</b><br/>有一座桥</p>  
  16.                 </div>  
  17.             </div>  
  18.         </div>  
  19.    </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2. $( "#iPicture" ).iPicture();  
  3. </script>  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_84.html