jquery实现网页Title提示效果代码

来源:互联网 时间:1970-01-01

我们会看有些网站当我们指上连接或图片时都会有一个小小的title或者alt效果,下面我来给大家介绍利用jquery快速实现漂亮的网页Title提示效果,有需要的朋友可参考。

 代码如下 复制代码

<!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=gbk" />

<title>Animated Menu Hover </title>

<script type="text/javascript" src="jquery.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="/">www.php100.com网</a>  
  <em>素材分享与设计交流!</em>
 </li>
 <li>
  <a href="/">www.php100.com社区</a>
  <em>设计师的交流社区!</em>
 </li>
 <li>
  <a href="">www.php100.com志</a>
  <em>我的www.php100.com,我的杂志!</em>
 </li>
</ul>

<br /><br /><br /><br /><br />

</body>
</html>




相关阅读:
Top