最新消息:

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

提示插件 杨红伟 1785浏览 0评论

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

4

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下!如图:

vtip_arrow

此图片在JS写着路径呢!!
上图看的不太清楚,请仔细看!

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址