<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery制作图片标注提示信息插件 - xw素材网</title>
<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>
<style type="text/css">
.demo{width:800px; margin:20px auto}
.demo p{line-height:24px}
</style>
</head>
<body>
<div id="main">
<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/>链接到：<a href="http://www.xwcms.net/js/list/jquerytx/jquerytx_1.html">xw素材网</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>
</div>
</div>
<script type="text/javascript">
$( "#iPicture" ).iPicture();
</script>
</body>
</html>
jQuery制作图片标注提示信息插件
4星 · 超过85%的资源 需积分: 43 187 浏览量
2014-03-13
09:07:42
上传
评论
收藏 113KB ZIP 举报 
3961394448531750.zip （8个子文件） 
css 
iPicture.css 15KB images 
mypic.jpg 64KB s1.jpg 12KB
index.html 2KB js jquery-1.8.3.min.js 91KB jquery.ipicture.js 4KB xw素材.htm 64B 更多素材.url 186B
评论1
最新资源