jQuery插件tooltip提示条实现Javascript动态文字或图片提示效果【转】

-11 6 jQuery插件tooltip提示条实现Javascript动态文字或图片提示效果【转】 Category:jquery学习 View: Author:燕子

我们经常在网页上或是游戏上面看到文字或者图片提示效果！这样的效果用jquery很容易实现，之前不知道有这样一个插件，今天在有个博友的博客上面看到了该文章，便转过来了！分享给php爱好者的读者们！

有时候我们需要给链接或文字增加tooltip提示条功能，实现Javascript动态文字或图片提示效果，以增强页面元素的友好度，使用jQuery插件tooltip提示条工具，不仅可以实现文字和图片提示条功能，还可以动态加载其它页面文件，丰富tooltip提示条的内容，而且使用比较简单，一行代码即可实现，jQuery插件tooltip提示条实现Javascript动态文字或图片提示效果图如下：
jquery_tooltip_sample
使用说明
需要使用jQuery库文件(目前版本1.3)和JQuery Magnify库文件

素材准备
CSS样式文件，增加提示条显示效果，便于jQuery插件tooltip提示条调用CSS样式，如：

.tooltip-red
{
background-color: #FCE5CE;
color: #F38F2A;
padding:10px 10px 10px 10px;
font-weight:bold;
z-index:100;
}
.tooltip-blue
{
background-color: #5555FF;
color: #FFFFFF;
font-size:13px;
font-family:verdana;
border:solid 2px #0000FF;
z-index:100;
}

实例代码
一，包含文件部分
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.tooltip.js"></script>

二，HTML部分(链接提示)

<div><a href="#" id="biuuu1" title="必优博客tooltip示例一" >示例一</a>: 简单的 tooltip 提条.</div><br/>
<div><a href="ajax_biuuu.html" id="biuuu2" >示例二</a>: 简单的 tooltip 提示条 ajax加载其它页面ajax_biuuu.html.</div><br/>
<div><a href="#" id="biuuu3" title="必优博客tooltip示例三" >示例三</a>: delay:1000, opacity:50.</div><br/>
<div style="float:right;"><a href="#" id="biuuu4" title="必优博客tooltip示例四" >示例四</a></div>

三，Javascript部分(jQuery插件tooltip提示条调用)

$(document).ready(function() {
$("#biuuu1").tooltip({cssClass:"tooltip-red"});
$("#biuuu2").tooltip({cssClass:"tooltip-red"});
$("#biuuu3").tooltip({cssClass:"tooltip-blue", delay:1000, opacity:50});
$("#biuuu4").tooltip({cssClass:"tooltip-red", duration:2000, xOffset:30});
});
</script>

jQuery代码分析
一，$("#biuuu1").tooltip({cssClass:"tooltip-red"})部分
简单的tooltip提示条，提示文字在<a>的title里，定义了tooltip提示条的CSS样式，tooltip-red为前面定义的CSS样式，效果图如下：
jquery_tooltip_sample1
二，$("#biuuu2").tooltip({cssClass:"tooltip-red"})部分
简单的tooltip提示条，提示内容由ajax动态加载ajax_biuuu.html页面获取，效果图如下：
jquery_tooltip_sample2
三，$("#biuuu3").tooltip({cssClass:"tooltip-blue", delay:1000, opacity:50})部分
定义tooltip提示条隐蔽效果的延迟delay和不透明度opacity，效果图如下：
jquery_tooltip_sample3
四，$("#biuuu4").tooltip({cssClass:"tooltip-red", duration:2000, xOffset:30})部分
定义tooltip提示条持续时间duration和X坐标的offset值。效果图如下：
jquery_tooltip_sample4
使用jQuery插件tooltip提示条可实现丰富的提示效果，可自定义提示条CSS样式，透明度，持续时间等等，轻松实现Javascript动态文字或图片提示效果，而且可加载其它页面做为提示条的内容，非常值得推荐。