jQuery上下左右动画切换菜单特效

时间：2013-11-23 来源：互联网
<!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>jQuery上下左右动画切换菜单特效</title>
<style type="text/css">
/*科e互联CSS基础框架*/
*{padding:0; margin:0; font-size:12px; list-style:none}
.cor_bs,.cor_bs:hover{ color: #ffffff; text-decoration: none; font-size:16px;}
.keBody{background:url(../images/bodyBg.jpg) repeat #333;}
.keTitle{height:100px; line-height:100px; font-size:30px; font-family:'微软雅黑'; color:#FFF; text-align:center;font-weight:normal}
.kePublic{ background: #fff url(http://www.internetke.com/jsEffects/2013111805/images/bg.jpg); padding: 10px 10px 50px; }
.keBottom{color:#FFF; padding-top:25px; line-height:28px; text-align:center; font-family:'微软雅黑'; padding-bottom:25px}
.keTxtP{font-size:16px; color:#ffffff;}
.keUrl{color:#FFF; font-size:30px;}
.keUrl:hover{ text-decoration: underline; color: #FFF; }
.button {display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding:0.25em 0.6em 0.3em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.red {color: #faddde;border: solid 1px #980c10;background: #d81b21;background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715));background: -moz-linear-gradient(top,  #ed1c24,  #A51715);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover { background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top,  #c9151b,  #a11115); filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); color:#fff;}
.red:active {color: #de898c;background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');}
/*科e互联CSS基础框架结束，可删除*/
/*特效CSS代码 开始*/
body, td, th { font-size: 14px; background-color: #FFF }
.kePublic h1 { border-bottom: 2px solid #600; margin: 50px 60px; font: 18px/32px "微软雅黑"; color: #600; }
.nav { width: 980px; height: 30px; left: 50%; margin-left: -490px; list-style: none; position: relative; }
.nav li { display: inline-block; margin: 0 3px; position: relative; overflow: hidden; height: 30px; /*建议此高度大于等于里面的a标签高度*/ float: left; }
.nav li span { display: inline-block; overflow: hidden }
.nav li a { text-decoration: none; outline: none; color: #371C00; display: inline-block; padding: 0 10px; text-align: center; height: 30px; font-size: 14px; line-height: 30px; font-weight: bold; background: #FFD275; }
.nav li a.over { color: #FFF; background: #371C00; }
/*特效CSS代码 结束*/
</style>
</head>
<body class="keBody">
<h1 class="keTitle">jQuery上下左右动画切换菜单特效</h1>
<div class="kePublic">
<!--效果html开始-->
<script type=text/javascript src="http://www.internetke.com/public/js/jquery.js"></script>
<script type="text/javascript">
(function($){
    $.fn.dynamicNav=function(options){
     
      //默认配置
     var defaults = {
      direction:"up", //动画切换方向，总共4种up 、down 、left 、right
      duration:100  //三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
      };   
      
                // 覆盖默认配置
    var opts = $.extend(defaults, options);
       
    this.each(function(){
     var navList=$(this).find("li"),
      navLink=navList.find("a");
        
      //在a标签外侧插入span
      navList.wrapInner("<span></span>");
         
      var span=navLink.parent();
         
      //判断是否垂直切换
      if(opts.direction=="up" || opts.direction=="down"){
       var v=true;
          }
          
      //判断是否改变span初始位置及a样式  
      if(opts.direction=="right" || opts.direction=="down"){
       var restSpan=true;
         }
         
       navLink.each(function(){
                
       //获取a高度和宽度
       var w=$(this).outerWidth(),
        p=$(this).parent();
                 
       //初始复制现有a标签   
       $(this).clone().appendTo(p).addClass("over");
              
        //如果是垂直切换
        if(v){    
          p.css("width",w);          
              }else{
          p.css("width",2*w).parent().css("width",w); 
          }
               
          });
         
      //如果向右或向下切换，改变span初始位置及a样式
      if(restSpan){
      span.each(function(){
             
         if(opts.direction=="right"){
         $(this).css({"margin-left":-$(this).outerWidth()/2});
         }
              
        if(opts.direction=="down"){
         $(this).css({"margin-top" : -$(this).outerHeight()/2});
         }
              
        $(this)
        .find('a')
        .last()
        .removeClass("over")
        .prev()
        .addClass("over");
       });
         }
        
      //鼠标经过时动画函数
      function over(o){
         o.animate(v?{"margin-top": -o.outerHeight()/2}:{"margin-left": -o.outerWidth()/2}, opts.duration);
          }
        
      //鼠标移开时动画函数
      function out(o){
       o.animate(v?{"margin-top":0}:{"margin-left": 0}, opts.duration);
         }
        
      //鼠标经过和离开 
      span.hover(function(){
          restSpan ? out($(this)) : over($(this));
           },function(){
            restSpan ? over($(this)) : out($(this));
           });
         
     });
   };
     
 })(jQuery);

    $(function(){
      
     //向左  
     $("#nav1").dynamicNav({
        direction:"left", //动画切换方向，总共4种up 、down 、left 、right
        duration:300  //三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
        });
      //向右    
     $("#nav2").dynamicNav({
        direction:"right", 
        duration:200  
        });
      //向上
     $("#nav3").dynamicNav({
        direction:"up", 
        duration:100 
        });
      //向下    
     $("#nav4").dynamicNav({
        direction:"down",
        duration:400
        });
     });

</script>
<h1>向左（速度300毫秒）</h1>
<ul class="nav" id="nav1">
  <li><a href="http://www.internetke.com/" target="_blank">首页</a></li>
  <li><a href="http://www.internetke.com/material/" target="_blank">网页素材</a></li>
  <li><a href="http://www.internetke.com/effects/" target="_blank">网页特效</a></li>
  <li><a href="http://www.internetke.com/share/" target="_blank">设计分享</a></li>
  <li><a href="http://www.internetke.com/tutorial/" target="_blank">建站教程</a></li>
  <li><a href="http://www.internetke.com/" target="_blank">网站建设</a></li>
</ul>
<h1>向右（速度200毫秒）</h1>
<ul class="nav" id="nav2">
  <li><a href="http://www.internetke.com/" target="_blank">首页</a></li>
  <li><a href="http://www.internetke.com/material/" target="_blank">网页素材</a></li>
  <li><a href="http://www.internetke.com/effects/" target="_blank">网页特效</a></li>
  <li><a href="http://www.internetke.com/share/" target="_blank">设计分享</a></li>
  <li><a href="http://www.internetke.com/tutorial/" target="_blank">建站教程</a></li>
  <li><a href="http://www.internetke.com/" target="_blank">网站建设</a></li>
</ul>
<h1>向上（速度100毫秒）</h1>
<ul class="nav" id="nav3">
  <li><a href="http://www.internetke.com/" target="_blank">首页</a></li>
  <li><a href="http://www.internetke.com/material/" target="_blank">网页素材</a></li>
  <li><a href="http://www.internetke.com/effects/" target="_blank">网页特效</a></li>
  <li><a href="http://www.internetke.com/share/" target="_blank">设计分享</a></li>
  <li><a href="http://www.internetke.com/tutorial/" target="_blank">建站教程</a></li>
  <li><a href="http://www.internetke.com/" target="_blank">网站建设</a></li>
</ul>
<h1>向下（速度400毫秒）</h1>
<ul class="nav" id="nav4">
  <li><a href="http://www.internetke.com/" target="_blank">首页</a></li>
  <li><a href="http://www.internetke.com/material/" target="_blank">网页素材</a></li>
  <li><a href="http://www.internetke.com/effects/" target="_blank">网页特效</a></li>
  <li><a href="http://www.internetke.com/share/" target="_blank">设计分享</a></li>
  <li><a href="http://www.internetke.com/tutorial/" target="_blank">建站教程</a></li>
  <li><a href="http://www.internetke.com/" target="_blank">网站建设</a></li>
</ul>
<!--效果html结束-->
</div>
<div class="keBottom">
<p class="keTxtP">科e互联网页特效集锦---更多特效请访问 <a class="keUrl" href="http://www.internetke.com" target="_blank">www.internetke.com</a></p>
<p class="keTxtP">本站导航：
<a href="http://www.internetke.com/" target="_blank" class="cor_bs">网站建设</a> | 
<a href="http://www.internetke.com/material/" target="_blank" class="cor_bs">网页素材</a> | 
<a href="http://www.internetke.com/effects/" target="_blank" class="cor_bs">网页特效</a> | 
<a href="http://www.internetke.com/share/" target="_blank" class="cor_bs">设计分享</a> | 
<a href="http://www.internetke.com/tutorial/" target="_blank" class="cor_bs">建站教程</a> | 
<a href="http://www.internetke.com/model/" target="_blank" class="cor_bs">网站模版</a> | 
<a href="http://www.internetke.com/appreciate/" target="_blank" class="cor_bs">酷站赏析</a>
</p>
<p class="keTxtP">＊尊重他人劳动成果，转载请自觉注明出处！注：此代码为【科e整理/原创特效】仅供学习交流，请勿用于商业用途。
<a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=a7df3558c291e0407375b9ad649d96a6e507286ffeb0650c65a221d1500a0779" class="button red" title="北京网站建设,网页特效QQ交流群-科e互联">加入QQ交流群</a></p>
</div>
<!--广告代码开始-->
<div style="text-align:center"><script src='/plus/ad_js.php?aid=22' language='javascript'></script></div>
<!--广告代码结束-->
</body>
</html>
运行代码保存代码收藏分享评论提示：您可以先修改部分代码再运行。
特效说明：
一款jQuery上下左右动画切换菜单网页特效，该特效可设置方向、动画切换时间。效果流程，网页导航菜单必备素材。（兼容测试：IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器）
标签菜单特效导航特效
JS采用VUE制作无限极树形结构菜单展开收缩代码

2019-04-12
HTML5绘制动态线条像素背景动画特效

2019-04-12
jQuery网页视频在线播放器代码

2019-04-12
HTML5科幻空间动画背景网页特效

2019-04-12
jQuery滑动验证解锁插件slideunlock.js

2019-04-10
jQuery上下左右动画切换菜单特效

分类导航

最新更新特效

JS采用VUE制作无限极树形结构菜单展开收缩代码

HTML5绘制动态线条像素背景动画特效

jQuery网页视频在线播放器代码

HTML5科幻空间动画背景网页特效

jQuery滑动验证解锁插件slideunlock.js
