jQuery达成推动画作用的二级下拉领航方法,仿flash的三个导航栏特效

正文实例陈述了jQuery达成拉动画成效的二级下拉领航方法。共享给我们供我们参照他事他说加以考察。具体实现格局如下:

jQuery实现推动画功能的二级下拉领航方法,jquery动画

本文实例陈说了jQuery达成拉动画成效的二级下拉领航方法。分享给大家供大家参谋。具体实现形式如下:

复制代码 代码如下:<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>jQuery二级下滑导菜单</title>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”
src=”jquery.effects.core.min.js”></script>
<style type=”text/css”>
body{ font-size:12px; font-family:Arial, Helvetica, sans-serif;
margin:0; padding:10px;}
.nav_jQuery达成推动画作用的二级下拉领航方法,仿flash的三个导航栏特效。list{ list-style:none; margin:0; padding:0;}
.nav_list li{ float:left; text-align:center;  margin-right:10px;
position:relative;}
.nav_list li a{ width:80px; text-align:center; padding:4px 0;
text-decoration:none;color:#ccc; background:#996666; display:block;
float:left;}
.nav_list li a.current{ width:80px; text-align:center; padding:4px 0;
text-decoration:none;color:#fff; background:#f00; display:block;
float:left;}
.nav_list li div.second{ color:#999999; height:0px; overflow:hidden;
position:absolute; left:0; top:22px; width:80px;}
.nav_list li div.second a{ background:#666666; color:#fff; 
border:none; width:80px; border-top:1px solid
#FFFFFF; padding:5px 0;}
</style>
<script type=”text/javascript”>
$(function(){ 
  Menu(“.nav_list”);
});
function Menu(ul_class_name){  
  Second(“.nav_list”);
  var li_name = ul_class_name+” “+”li”;
  $(“div.second”).css(“opacity”,”0.1″);
  $(li_name).hover(
    function(){
      var a_height =  $(this).children(“div.second
a:first”).css(“height”);
      var a_count =
$(this).children(“div.second”).children(“a”).length;
      var slide_hieght =  (parseInt(a_height)+11)*a_count;
     
$(this).children(“div.second”).stop().animate({height:slide_hieght+”px”,opacity:”0.9″},600);  
     
$(this).children(“a:not(.current)”).stop().animate({backgroundColor:”#f00″,color:”#fff”},800);
    },function(){
     
$(this).children(“div.second”).stop().animate({height:”0px”,opacity:”0.1″},600);
     
$(this).children(“a:not(.current)”).stop().animate({backgroundColor:”#996666″,color:”#ccc”},800);
    });
}
function Second(ul_class_name){
  var second_menu = ul_class_name+” “+”li”+” “+”div.second”+”
“+”>”+” “+”a”;
  $(second_menu).hover(
   function(){
     
$(this).stop().animate({backgroundColor:”#000″,opacity:”1″},400);
    },function(){
     
$(this).stop().animate({backgroundColor:”#666″,opacity:”0.9″},400);
    });
}
</script>
</head>
<body>
<ul class=”nav_list”>
  <li>
    <a href=”#” class=”current”>Test_1</a>
    <div class=”second”>
      <a href=”#”>menu_1</a>
      <a href=”#”>menu_1</a>
      <a href=”#”>menu_1</a>
    </div>
  <li>
  <li>
    <a href=”#”>Test_2</a>
    <div class=”second”>
      <a href=”#”>menu_1</a>
      <a href=”#”>menu_1</a>
      <a href=”#”>menu_1</a>
      <a href=”#”>menu_1</a>
      <a href=”#”>menu_1</a>
      <a href=”#”>menu_1</a>
      <a href=”#”>menu_1</a>
      <a href=”#”>menu_1</a>
    </div>
  <li>
  <li>
    <a href=”#”>Test_3</a>
    <div class=”second”>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
    </div>
  <li>
  <li>
    <a href=”#”>Test_4</a>
    <div class=”second”>
      <a href=”#”>menu_4</a>
      <a href=”#”>menu_4</a>
      <a href=”#”>menu_4</a>
    </div>
  <li>
  <li>
    <a href=”#”>Test_5</a>
    <div class=”second”>
      <a href=”#”>menu_5</a>
      <a href=”#”>menu_5</a>
      <a href=”#”>menu_5</a>
    </div>
  <li>
</ul>
<div style=”width:800px; clear:both; padding:10px;”>
 
<p>那是一段文字那是一段文字那是一段文字这是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字这是一段文字那是一段文字那是一段文字那是一段文字这是一段文字那是一段文字那是一段文字那是一段文字这是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字这是一段文字这是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字这是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字这是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字这是一段文字那是一段文字</p>
</div>
</body>
</html>

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

本文实例陈诉了jQuery实现拉动画作用的二级下拉领航方法。分享给我们供我们仿照效法。具…

jquery-仿flash的一个导航栏特效,jquery-导航栏

演示地址:

 

 

Html代码  金沙澳门官网 1

  1. <html>  
  2. <head>  
  3.     <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″>  
  4.     <title>demo01</title>  
  5.     <link rel=”stylesheet” type=”text/css” href=”demo.css”>  
  6.     <script type=”text/javascript” src=”jquery.js”></script>  
  7.     <script type=”text/javascript” src=”demo.js”></script>  
  8. </head>  
  9. <body>  
  10.         <div id=”main”>  
  11.         <div class=”menu”>  
  12.             <div class=”menu_b back1″></div>  
  13.             <span>测试</span>  
  14.         </div>  
  15.         <div class=”menu”>  
  16.             <div class=”menu_b back2″></div>  
  17.             <span>测试</span>  
  18.         </div>  
  19.         <div class=”menu”>  
  20.             <div class=”menu_b back3″></div>  
  21.             <span>测试</span>  
  22.         </div>  
  23.         <div class=”menu”>  
  24.             <div class=”menu_b back4″></div>  
  25.             <span>测试</span>  
  26.         </div>  
  27.         <div class=”menu”>  
  28.             <div class=”menu_b back5″></div>  
  29.             <span>测试</span>  
  30.         </div>  
  31.         <div class=”menu”>  
  32.             <div class=”menu_b back6″></div>  
  33.             <span>测试</span>  
  34.         </div>  
  35.         </div>  
  36. </body>  
  37. </html>  

 

 

Js代码  金沙澳门官网 2

  1. $(document).ready(function(){  
  2.     $(“.menu”).mouseover(function(){  
  3.         var div = $(this).children(“.menu_b”);  
  4.         var span = $(this).children(“span”);  
  5.         //隐蔽字体,往右移动20px  
  6.         span.stop(true,false).animate({opacity:’0′,left:’20px’},200);  
  7.         //彰显背景动画  
  8.         div.stop(true,false).animate({width:’100px’,marginLeft:’-50px’,height:’1px’,opacity:’1′},300);  
  9.         div.animate({height:’40px’,marginTop:’-20px’,opacity:’1′},300);  
  10.         //展现字体,往左移动20px  
  11.         span.animate({opacity:’1′,left:’0px’},300);  
  12.         span.css({color:’#FFF’});  
  13.     });  
  14.   
  15.     $(“.menu”).mouseout(function(){  
  16.         var div = $(this).children(“.menu_b”);  
  17.         var span = $(this).children(“span”);  
  18.         //遮掩字体,往左移动20px  
  19.         span.stop(true,false).animate({opacity:’0′,left:’20px’},200);  
  20.         //呈现背景动画  
  21.         div.stop(true,false).animate({height:’1px’,marginTop:’0px’,opacity:’1′},300);  
  22.         div.animate({width:’0px’,marginLeft:’0px’,opacity:’1′},300);  
  23.         //展现字体,往右移动20px  
  24.         span.animate({opacity:’1′,left:’0px’},300);  
  25.         span.css({color:’#777′});  
  26.     });  
  27. });  

 动画功效是本人根据自身的喜好来写的,喜欢的能够友善改动特效。。

 

Css代码  金沙澳门官网 3

  1. /* demo01 css */  
  2. #main{  
  3.     background: #EEE;  
  4.     display: inline-block;  
  5.     padding: 10px;  
  6. }  
  7. .menu{position: relative;  
  8.     width: 100px;  
  9.     height: 40px;  
  10.     margin: 10px auto;  
  11. }  
  12.   
  13. .menu_b{  
  14.     position: absolute;  
  15.     width: 0px;  
  16.     height: 0px;  
  17.     background: red;  
  18.     z-index: 1px;  
  19.     top: 50%;  
  20.     left: 50%;  
  21. }  
  22. .menu span{  
  23.     position: inherit;  
  24.     display: block;  
  25.     text-align: center;  
  26.     line-height: 40px;  
  27.     z-index: 3px;  
  28.     font-size: 14px;  
  29.     font-family: “Microsoft Yahei”;  
  30.     color: #777;  
  31.     cursor: pointer;  
  32. }  
  33. .back1{  
  34.     background: #FF0000;  
  35. }  
  36. .back2{  
  37.     background: #921AFF;  
  38. }  
  39. .back3{  
  40.     background: #00CACA;  
  41. }  
  42. .back4{  
  43.     background: #00DB00;  
  44. }  
  45. .back5{  
  46.     background: #FF5809;  
  47. }  
  48. .back6{  
  49.     background: #E1E100;  
  50. }  

 

  • demo05.zip (33.2 KB)

复制代码 代码如下:

高分贰个用js写的符合标准的仿flash导航条

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“www.w3.org/TR/xhtml1/DTD/xhtml1-

strict.dtd”>
<html xmlns=”www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>导航条演示</title>
<style type=”text/css” media=”all”>
/* <![CDATA[ */
body{margin:100px 0}
.clear:after{content:”.”; display:block; height:0; clear:both;
visibility:hidden}.clear

{display:inline-block}.clear{display:block}
div#nav{height:70px; background:url(img/nav_bg.png) repeat-x}
div#nav ul{width:960px; margin:0 auto; list-style:none}
div#nav ul li{float:left; height:35px; overflow:hidden; padding:0 2px 0
0; font: bold 12px/35px

Arial; background:url(img/nav_right.png) repeat-y right 0}
div#nav ul li a{float:left; height:100%; padding:0 20px;
background:url(img/nav_sub.png) repeat-x;

color:#fff; text-decoration:none}
div#nav ul li a.hover{clear:both; background-position:0 -35px}
div#nav ul li.on a{background-position:0 -35px}
div#nav ul li.nobg{background:none}

h2{text-align:center}
/* ]]> */
</style>
</head>

<body>

<d……余下全文>>
 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>jQuery二级下滑导菜单</title>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”
src=”jquery.effects.core.min.js”></script>
<style type=”text/css”>
body{ font-size:12px; font-family:Arial, Helvetica, sans-serif;
margin:0; padding:10px;}
.nav_list{ list-style:none; margin:0; padding:0;}
.nav_list li{ float:left; text-align:center;  margin-right:10px;
position:relative;}
.nav_list li a{ width:80px; text-align:center; padding:4px 0;
text-decoration:none;color:#ccc; background:#996666; display:block;
float:left;}
.nav_list li a.current{ width:80px; text-align:center; padding:4px 0;
text-decoration:none;color:#fff; background:#f00; display:block;
float:left;}
.nav_list li div.second{ color:#999999; height:0px; overflow:hidden;
position:absolute; left:0; top:22px; width:80px;}
.nav_list li div.second a{ background:#666666; color:#fff; 
border:none; width:80px; border-top:1px solid
#FFFFFF; padding:5px 0;}
</style>
<script type=”text/javascript”>
$(function(){ 
  Menu(“.nav_list”);
});
function Menu(ul_class_name){  
  Second(“.nav_list”);
  var li_name = ul_class_name+” “+”li”;
  $(“div.second”).css(“opacity”,”0.1″);
  $(li_name).hover(
    function(){
      var a_height =  $(this).children(“div.second
a:first”).css(“height”);
      var a_count =
$(this).children(“div.second”).children(“a”).length;
      var slide_hieght =  (parseInt(a_height)+11)*a_count;
     
$(this).children(“div.second”).stop().animate({height:slide_hieght+”px”,opacity:”0.9″},600);  
     
$(this).children(“a:not(.current)”).stop().animate({backgroundColor:”#f00″,color:”#fff”},800);
    },function(){
     
$(this).children(“div.second”).stop().animate({height:”0px”,opacity:”0.1″},600);
     
$(this).children(“a:not(.current)”).stop().animate({backgroundColor:”#996666″,color:”#ccc”},800);
    });
}
function Second(ul_class_name){
  var second_menu = ul_class_name+” “+”li”+” “+”div.second”+”
“+”>”+” “+”a”;
  $(second_menu).hover(
   function(){
     
$(this).stop().animate({backgroundColor:”#000″,opacity:”1″},400);
    },function(){
     
$(this).stop().animate({backgroundColor:”#666″,opacity:”0.9″},400);
    });
}
</script>
</head>
<body>
<ul class=”nav_list”>
  <li>
    <a href=”#” class=”current”>Test_1</a>
    <div class=”second”>
金沙澳门官网 ,      <a href=”#”>menu_1</a>
      <a href=”#”>menu_1</a>
      <a href=”#”>menu_1</a>
    </div>
  <li>
  <li>
    <a href=”#”>Test_2</a>
    <div class=”second”>
      <a href=”#”>menu_1</a>
      <a href=”#”>menu_1</a>
      <a href=”#”>menu_1</a>
      <a href=”#”>menu_1</a>
      <a href=”#”>menu_1</a>
      <a href=”#”>menu_1</a>
      <a href=”#”>menu_1</a>
      <a href=”#”>menu_1</a>
    </div>
  <li>
  <li>
    <a href=”#”>Test_3</a>
    <div class=”second”>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
      <a href=”#”>menu_3</a>
    </div>
  <li>
  <li>
    <a href=”#”>Test_4</a>
    <div class=”second”>
      <a href=”#”>menu_4</a>
      <a href=”#”>menu_4</a>
      <a href=”#”>menu_4</a>
    </div>
  <li>
  <li>
    <a href=”#”>Test_5</a>
    <div class=”second”>
      <a href=”#”>menu_5</a>
      <a href=”#”>menu_5</a>
      <a href=”#”>menu_5</a>
    </div>
  <li>
</ul>
<div style=”width:800px; clear:both; padding:10px;”>
 
<p>那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字这是一段文字那是一段文字那是一段文字那是一段文字那是一段文字这是一段文字那是一段文字这是一段文字那是一段文字那是一段文字那是一段文字这是一段文字那是一段文字那是一段文字那是一段文字这是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字这是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字这是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字这是一段文字那是一段文字那是一段文字那是一段文字这是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字那是一段文字</p>
</div>
</body>
</html>

jquery仿Flash效果的导航但点击链接的时未尝影响

新窗口展开:
<li onClick=”window.open(‘www.baidu.com’)”><a
href=”#”>Home</a></li>
原窗口跳转:
<li onClick=”window.location.href=’www.baidu.com'”><a
href=”#”>Plant a tree</a></li>
 

演示地址: Html代码 html
head meta http-equiv= “Content-Type” conten…

意在本文所述对大家的jQuery程序设计有所支持。

你恐怕感兴趣的篇章:

  • 依据jquery达成百度资源音信导航菜单滑动动画
  • 传闻jQuery达成鼠标点击导航菜单水波动画功用附源码下载
  • jQuery完成三款有动画效果的导航菜单代码
  • 一款基jquery超炫的动画导航菜单可响应单击事件
  • 运用jquery动画特效和css塑造的左边弹出垂直导航
  • jquery完结掩饰与展现动画效果/输入框字符动态递减/导航按钮切换
  • Jquery达成带动画成效的经文二级导航菜单
  • jQuery达成的领航动画效果(附demo源码)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图