iPictrue:图片标注提醒

iPictrue:图片标注提示

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

?

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>??

?

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

?

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