jQuery.ipicture演示三种图片标注提示

收藏

iPicture是免费的图片标注提示插件。iPicture可轻松的创建描述,照片,嵌入视频,链接。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示 下载资源： 108 次

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

<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/>链接到：<a href="http://erdangjiade.com">素材火</a></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><img src="images/s1.jpg" alt="高楼美女" ></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/>有一座桥，全长688米。</p>
        </div>
    </div>
</div>

引入jQuery和iPicture相关组件

<link rel="stylesheet" type="text/css" media="screen" href="css/iPicture.css"/>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.ipicture.js"></script>

调用iPicture插件：

$("#iPicture").iPicture();