说明:该插件用于需要显示链接对象网页及图片说明等信息的情况。
官方链接: http://www.vertigo-project.com/projects/vtip
JS下载: http://www.ijquery.cn/js/vtip-min.js
预览: http://www.ijquery.cn/study/demo/vtip
打包下载: http://www.ijquery.cn/study/demo/vtip/vtip.zip
参数说明: 将标签里加上class属性和title属性,如 img -> <img src="1.jpg" title="这是vtip"的属性。
图片展示:
JS引用代码:
<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/vtip-min.js"></script>
HTML代码:
<ul>
<li><a href="http://www.vertigo-project.com/projects/vtip" title="显示提示信息「vTip」" >vTip</a></li>
<li><img src="images/1.jpg" title="漂亮的大海" /></li>
<li><div title="div标签也能加提示信息。" >div标签的提示信息!</div></li>
</ul>
CSS代码:
注意:需要引入vtip.css。即:
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 }
p#vtip #vtipArrow { position: absolute; top: -10px; left: 5px }
注意还需要在图片里加入图片元素,放在images下!如图:
此图片在JS写着路径呢!!
上图看的不太清楚,请仔细看!