×

附有动画导航功能菜单

作者:andy0012018.10.22来源:Web前端之家浏览:21378评论:0
关键词:JQueryJS

本文实例讲述了jQuery实现两款有动画功能的导航菜单代码。分享给大家供大家参考。具体如下:

这里介绍两个有动画功能的jQuery导航菜单,每个具备移动背景的效果,第二则是渐变背景效果,两个都不错,根据你的喜好选择了,菜单的风格和颜色自己修改一下就能用了。

运行效果截图如下:

具体代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>两个有动画功能的导航菜单</title>
<script src="/demo/js/jq.js" type="text/javascript"></script> 
<script type="text/javascript">
$(function()
{
 $("#test1 a").mouseover(function()
 { 
  var index = $("#test1 a").index(this);
  var width = $("#test1 a").width();
  $("#test1 .showhover").stop().animate({left:width*index},1000);
 })
 $("#test2 a").mouseover(function()
 { 
  var index = $("#test2 a").index(this);
  var width = $("#test2 a").width();
  $("#test2 .showhover").stop().animate({left:width*index,opacity:'0.6'},1000).stop(false,true).animate({opacity:'1.0'},500);
 })
})
</script> 
<style type="text/css">
.body {margin:10px;}
img {border:0;}
a {text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
.menu {background:#003399; height:25px; width:600px; position:relative; overflow:hidden;}
.menu .showmenu, .menu .showhover{ position:absolute;}
.menu .showmenu a {float:left; display:block;}
.menu .showmenu a {font:700 12px/25px Microsoft YaHei; color:#fff; width:100px; height:25px; text-align:center;}
.menu .showhover {background:#990033; width:100px; height:25px;}
</style>
</head>
<body>
<div class="menu" id="test1">
 <div class="showhover"></div>
 <div class="showmenu">
  <a href="#">网站首页</a>
  <a href="#">关于我们</a>
  <a href="#">新闻中心</a>
  <a href="#">产品中心</a>
  <a href="#">解决方案</a>
  <a href="#">联系我们</a>
 </div>
</div>
<div style="clear:both;height:50px;"></div>
<div class="menu" id="test2">
 <div class="showhover"></div>
 <div class="showmenu">
  <a href="#">网站首页</a>
  <a href="#">关于我们</a>
  <a href="#">新闻中心</a>
  <a href="#">产品中心</a>
  <a href="#">解决方案</a>
  <a href="#">联系我们</a>
 </div>
</div>
</body>
</html>

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

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/svg1485273600752.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    sddddddddddddddVS的vVSVS但是v方法v方法v发v方法v发v发v方不方便德文法文...

  • 没人发言

    鸡肋的功能...

  • 23b

    这个你应该加群找群主才对吧...

  • 访客

    大佬,能提供能一下提取图片中的文字工具的源码吗,感谢...

  • qdxx

    SEO原创还可以的,新手学习下。...

  • Web前端之家

    已处理!...

  • 程序员路灯

    贵站友链已添加名称:程序员路灯地址:http://www.eqishare.com...

  • Web前端之家

    可以加群讨论...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2022 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2