可上下左右切换的jquery动态导航插件-JS特效-爱易网页

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

日期：2014-05-18　浏览次数：20183 次

以下是程序代码

<!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">
<!--
body, td, th {
 font-size: 14px;
 background-color:#FFF
}
h1{border-bottom:1px solid #999; margin:50px 60px;}

/*导航默认样式，可根据实际情况修改*/
* {
 margin:0;
 padding:0
}
.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:#666;
 display:inline-block;
 padding:0 10px;  
 text-align:center;
 background-color: #E1E1E1;
 font-weight:bold;
 height:30px;
 line-height:30px;
}

/*鼠标经过时样式*/
.nav li a.over {
 background-color:#666;
 color:#FFF
}
-->
</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));
</div></div>

<div class="clearfix"></div>
                    </div>
                    <nav aria-label="...">
                        <ul class="pager">
                            <li class="previous"><a href="4667">上一篇：狡猾的按钮特效</a></li>

<li class="next"><a href="21">下一篇：纯CSS菜单导航特效代码</a></li>
                        </ul>
                    </nav>

<div class="alert alert-warning" role="alert">
                        <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
                    </div>

<div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34273' title='任正非：华为决不上市 上市公司股东贪婪而短视' target="_blank">
                        任正非：华为决不上市 上市公司股东贪婪而短视</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/16162' title='优酷土豆携手新浪微博 谋攻移动视频失地' target="_blank">
                        优酷土豆携手新浪微博 谋攻移动视频失地</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34400' title='只有切到刚需痛点，漫画APP才能走下去' target="_blank">
                        只有切到刚需痛点，漫画APP才能走下去</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34224' title='虚拟运营商温度有多高？降温OR升温内外有别' target="_blank">
                        虚拟运营商温度有多高？降温OR升温内外有别</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34398' title='北京电信推“0月租卡”，同网通话免费' target="_blank">
                        北京电信推“0月租卡”，同网通话免费</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34168' title='HTC的三大迷惘：高管釜底抽薪 产品营销战略混乱' target="_blank">
                        HTC的三大迷惘：高管釜底抽薪 产品营销战略混乱</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34195' title='八位知名设计师评iOS7：新鲜但复杂' target="_blank">
                        八位知名设计师评iOS7：新鲜但复杂</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34100' title='搜狐与奇虎360或结盟对抗BAT' target="_blank">
                        搜狐与奇虎360或结盟对抗BAT</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10835' title='传诺基亚5月14日发布会推出Lumia 950' target="_blank">
                        传诺基亚5月14日发布会推出Lumia 950</a></li></div>
                   
                
        </ol>
    </div>
</div>

</div>

</div>
            </div>
            <div class="clearfix"></div>

<footer class=" footer navbar-bottom">
<em>友情链接：</em>
    
      <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a>            
    
<br />
<script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script>

Copyright © 2013-2025 爱易网页 当前在线：356人　
        网站在15时0分42秒内访问总人数：115679人
    当前 9.68%
　<a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script>

</footer>

</div>
   
</body>
</html>