本例css和js插件请到演示页面查看
![iPictrue:图片标注提示 iPictrue:图片标注提示](https://i-blog.csdnimg.cn/blog_migrate/492c7939ec1dfce775b4df11a7ffe1c7.jpeg)
XML/HTML Code
- <div class="demo">
- <div id="iPicture" data-interaction="hover">
- <div class="ip_slide">
- <img class="ip_tooltipImg" src="images/mypic.jpg">
- <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/></p>
- </div>
- <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><b>高楼</b><br/></p>
- </div>
- <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/>有一座桥</p>
- </div>
- </div>
- </div>
- </div>
JavaScript Code
- <script type="text/javascript">
- $( "#iPicture" ).iPicture();
- </script>
原文地址:http://www.freejs.net/article_jquerytupiantexiao_84.html