一个简单的jQuery信息提示(jQuery Tooltip)效果 [转]

jQuery信息提示(jQuery Tooltip)效果可以很好的提升用户体验,在web developer中也经日趋频繁,下面是一个简单的jQuery息提示效果实例演示。

jQuery信息提示效果

首先加载jQuery库文件:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

下面是jQuery核心代码:

<script type="text/javascript">
$(document).ready(function(){

	$(".menu a").hover(function() {
		$(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
	}, function() {
		$(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
	});

});
</script>

HTML代码如下:

<ul>
  <li><a href="#">…</a><em style="top: -85px; display: none;">…</em></li>
  <li><a href="#">…</a><em style="top: -85px; display: none;">…</em></li>
  <li><a href="#">…</a><em style="top: -85px; display: none;">…</em></li>
</ul>

jQuery信息提示(jQuery Tooltip)效果下载jQuery信息提示(jQuery Tooltip)效果下载

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注


*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>