当前位置: 首页 > 实例教程 > 脚本特效 > 链接 & 提示条 > 带上箭头的提示信息效果

链接 & 提示条
带上箭头的提示信息效果
多种连接内容提示
很酷的浮动提示信息
实例搜索

关键字

链接 & 提示条 中的 带上箭头的提示信息效果

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-07-27   浏览: 465 ::
收藏到网摘: n/a

带上箭头的提示信息效果 - 软晨网（RuanChen.com）

DEMO：

Dynamic Drive CSS Library

JavaScript Kit
Original, practical CSS codes and examples such as CSS menus to give your site a visual boast!
Award winning JavaScript tutorials and over 400+ free scripts.

第一步：下载CSS文件和JS文件，还有图片

/example/files/b/balloontip.js
/example/files/b/balloontip.css
下 上

第二步：在页面的HEAD区域加上

<link rel="stylesheet" type="text/css" href="/example/files/b/balloontip.css" /> <script type="text/javascript" src="/example/files/b/balloontip.js"></script>

第三步：完成上面的步骤后，剩下工作就是将你需要显示提示信息的地方加上必要的代码，下面是个举例

<a href="http://www.dynamicdrive.com/style/" rel="balloon1">Dynamic Drive CSS Library</a><br /><br /> <a href="http://www.javascriptkit.com" rel="balloon2">JavaScript Kit</a> <div id="balloon1" class="balloonstyle"> <img src="shadetabs.gif" style="float: right; margin-left: 5px; border:1px solid black" />Original, practical CSS codes and examples such as CSS menus to give your site a visual boast! </div> <div id="balloon2" class="balloonstyle" style="width: 350px; background-color: lightyellow"> Award winning JavaScript tutorials and over 400+ free scripts. </div>

评论 (0) All

登陆 | 还没注册？