第4款插件:vTip提示框插件

说明：该插件用于需要显示链接对象网页及图片说明等信息的情况。
官方链接：  http://www.vertigo-project.com/projects/vtip
JS下载：  http://ijquery.360sites.cn/js/vtip-min.js
预览：     http://ijquery.360sites.cn/demo/vtip
打包下载：  http://ijquery.360sites.cn/demo/vtip/vtip.zip
参数说明： 将标签里加上class属性和title属性，如 img -> <img src="1.jpg" class="vtip" title="这是vtip"的属性。
图片展示：

JS引用代码：

1. <script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/jquery-1.4.2.min.js"></script>
   
2. <script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/vtip-min.js"></script>

复制代码

HTML代码：

1. <ul>
   
2.         <li><a href="http://www.vertigo-project.com/projects/vtip" title="显示提示信息「vTip」" class="vtip" >vTip</a></li>
   
3.         <li><img src="images/1.jpg"  title="漂亮的大海" class="vtip" /></li>
   
4.         <li><div  class="vtip" title="div标签也能加提示信息。" >div标签的提示信息！</div></li>
   
5. </ul>

复制代码

CSS代码：
注意：需要引入vtip.css。即：

1. p#vtip { display: none; position: absolute; padding: 10px; left: 5px; font-size: 0.8em; background-color: white; border: 1px solid #a6c9e2; -moz-border-radius: 5px; -webkit-border-radius: 5px; z-index: 9999 }
   
2. p#vtip #vtipArrow { position: absolute; top: -10px; left: 5px }

复制代码

注意还需要在图片里加入图片元素，放在images下！如图：



此图片在JS写着路径呢！！

上图看的不太清楚，请仔细看！

[转] http://ijquery.360sites.cn/forum.php?mod=viewthread&tid=4