jQuery tips信息提示效果实例

来源:转载

信息提示效果我们一般都是直接使用title或直接使用图片的alt,但这种默认效果很难看的,下面我来给大家介绍一款不错的jQuery tips信息提示效果,有需要的可参考。

首先加载jQuery库文件:

 代码如下 复制代码

<script type="text/javascript" src="jquery.min.js"></script>

下面是jQuery核心代码:

 代码如下 复制代码

$(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");

    });});

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>

完整实例

 

 代码如下 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Animated Menu Hover 1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<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>
<style type="text/css">
body { margin: 10px auto; width: 570px; font: 75%/120% Arial, Helvetica, sans-serif; }
.menu { margin: 100px 0 0; padding: 0; list-style: none; }
.menu li { padding: 0; margin: 0 2px; float: left; position: relative; text-align: center; }
.menu a { padding: 14px 10px; display: block; color: #000000; width: 144px; text-decoration: none; font-weight: bold; background: url(images/button.gif) no-repeat center center; }
.menu li em { background: url(images/hover.png) no-repeat; width: 180px; height: 45px; position: absolute; top: -85px; left: -15px; text-align: center; padding: 20px 12px 10px; font-style: normal; z-index: 2; display: none; }
</style>
</head>
<body>
<ul class="menu">
  <li> <a href="#">Web Designer Wall</a> <em>A wall of design ideas, web trends, and tutorials</em> </li>
  <li> <a href="#">Best Web Gallery</a> <em>Featuring the best CSS and Flash web sites</em> </li>
  <li> <a href="#">N.Design Studio</a> <em>Blog and design portfolio of WDW designer, Nick La</em> </li>
</ul>
</body>
</html>




分享给朋友:
您可能感兴趣的文章:
随机阅读: