iPictrue:图片标注提示

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

演示

 

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

"text/javascript">
$( "#iPicture" ).iPicture();

 

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