jquery实现美观的导航菜单鼠标提示特效代码

前端技术 2023/09/06 JavaScript

本文实例讲述了jquery实现美观的导航菜单鼠标提示特效代码。分享给大家供大家参考。具体如下：

这是一个奇妙的导航菜单鼠标提示特效，俗称“链接提示”，鼠标放在导航菜单的链接上即可显示出该链接所指向网页的大致内容，提示用户到达需要的页面。

先来看看运行效果截图：

在线演示地址如下：

http://demo.phpstudy.net/js/2015/jquery-nav-tips-nav-menu-style-codes/

具体代码如下：

<!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>链接提示特效</title>
<script type=\"text/javascript\" src=\"jquery1.3.2.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=\"http://www.baidu.com\">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>

希望本文所述对大家的jquery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/17155

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案