可上下左右切换的jquery动态导航插件

稿源：互联网 2022-04-02 21:38:20 点击： 29288 撤稿纠错

此插件html结构和样式及行为完全分离，html结构很简单，就像往常我们做导航一样不需添加任何额外的标签。

以下讨论的是和动态导航相关的可上下左右切换的jquery动态导航插件教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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>
<style type="text/css">

</style>
<script type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.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>
</head>
<body>

<h1>向左（速度300毫秒）</h1>
<ul class="nav" id="nav1">
  <li><a href="http://www.muzilei.com/">首页</a></li>
  <li><a href="http://www.muzilei.com/">前端技术</a></li>
  <li><a href="http://www.muzilei.com/">视觉设计</a></li>
  <li><a href="http://www.muzilei.com/">文章归档</a></li>
  <li><a href="http://www.muzilei.com/">工具/书籍</a></li>
  <li><a href="http://www.muzilei.com/">关于我</a></li>
</ul>

<h1>向右（速度200毫秒）</h1>
<ul class="nav" id="nav2">
  <li><a href="http://www.muzilei.com/">首页</a></li>
  <li><a href="http://www.muzilei.com/">前端技术</a></li>
  <li><a href="http://www.muzilei.com/">视觉设计</a></li>
  <li><a href="http://www.muzilei.com/">文章归档</a></li>
  <li><a href="http://www.muzilei.com/">工具/书籍</a></li>
  <li><a href="http://www.muzilei.com/">关于我</a></li>
</ul>


<h1>向上（速度100毫秒）</h1>
<ul class="nav" id="nav3">
  <li><a href="http://www.muzilei.com/">首页</a></li>
  <li><a href="http://www.muzilei.com/">前端技术</a></li>
  <li><a href="http://www.muzilei.com/">视觉设计</a></li>
  <li><a href="http://www.muzilei.com/">文章归档</a></li>
  <li><a href="http://www.muzilei.com/">工具/书籍</a></li>
  <li><a href="http://www.muzilei.com/">关于我</a></li>
</ul>

<h1>向下（速度400毫秒）</h1>
<ul class="nav" id="nav4">
  <li><a href="http://www.muzilei.com/">首页</a></li>
  <li><a href="http://www.muzilei.com/">前端技术</a></li>
  <li><a href="http://www.muzilei.com/">视觉设计</a></li>
  <li><a href="http://www.muzilei.com/">文章归档</a></li>
  <li><a href="http://www.muzilei.com/">工具/书籍</a></li>
  <li><a href="http://www.muzilei.com/">关于我</a></li>
</ul>

</body>
</html>

关于可上下左右切换的jquery动态导航插件的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011121777312.shtml方便下次再访问哦。

·上一篇： 一则考试测试题实时答题进度js特效代码
·下一篇： 仿淘宝主页的图片向上滚动导航特效代码

可上下左右切换的jquery动态导航插件

文章分类LIST >>返回首页

最新游戏

最新新闻