请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

Endige-新锐工作室

 找回密码
 立即注册

用新浪微博连接

一步搞定

QQ登录

只需一步,快速开始

查看: 3795|回复: 0

jquery模仿flash导航 [复制链接]

Rank: 2

威望
0
金钱
43
贡献
0
新豆
0
最后登录
1970-1-1
注册时间
2011-11-23
精华
0
积分
52
阅读权限
20
帖子
9
发表于 2011-11-25 15:15:26 |显示全部楼层
本帖最后由 louis 于 2011-11-29 21:03 编辑

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title>jquery仿flash导航</title>
  5. </head>
  6. <style>
  7. *{ margin:0; padding:0;}
  8. .con{ height:40px; width:100%; overflow:hidden; position:relative; background:#9fc;}
  9. .nav_u{ height:26px; font:22px/26px "宋体"; font-style:italic; font-weight:bold; color:#333; position:relative;}
  10. .nav_d{ height:14px; font:12px/12px "宋体"; color:#333; position:relative;}
  11. .pos{position:relative; left:200px;}
  12. .con a{ text-decoration:none; display:block; color:#666}
  13. .nav_ub{ width:100%; height:26px; position:absolute; top:0px;  background:#fff;}
  14. .nav_db{ width:100%; height:14px; position:absolute; bottom:0px; background:#fff;}
  15. </style>
  16. <script src="http://www.endige.net/templates/js/jquery-1.7.min.js"></script>
  17. <script>
  18. $(document).ready(function(){
  19.         $(".con").prepend('<div class="nav_ub"></div><div class="nav_db"></div>')
  20.         $(".con").hover(function(){
  21.                 $(this).children(".nav_ub").stop().animate({top:-26},300);
  22.                 $(this).find(".pos").stop().animate({left:220},250);
  23.                 $(this).children(".nav_db").stop().animate({bottom:-14},300);
  24.                 $(this).find(".pos").stop().animate({left:220},250);
  25.         },function(){
  26.                 $(this).children(".nav_ub").stop().animate({top:0},300);
  27.                 $(this).find(".pos").stop().animate({left:200},250);
  28.                 $(this).children(".nav_db").stop().animate({bottom:0},300);
  29.                 $(this).find(".pos").stop().animate({left:200},250);
  30.         });
  31. })
  32. </script>
  33. <body>
  34.         <div class="con">
  35.         <div class="nav_u"><a class="pos" href="#">AAAAA</a></div>
  36.         <div class="nav_d"><a class="pos" href="#">aaaaa</a></div>
  37.     </div>
  38.     <div class="con">
  39.             <div class="nav_u"><a class="pos" href="#">BBBBB</a></div>
  40.         <div class="nav_d"><a class="pos" href="#">bbbbb</a></div>
  41.     </div>
  42.     <div class="con">
  43.             <div class="nav_u"><a class="pos" href="#">CCCCC</a></div>
  44.         <div class="nav_d"><a class="pos" href="#">ccccc</a></div>
  45.     </div>
  46.     <div class="con">
  47.             <div class="nav_u"><a class="pos" href="#">AABBCC</a></div>
  48.         <div class="nav_d"><a class="pos" href="#">aabbcc</a></div>
  49.     </div>
  50.         

  51. <p><br />
  52. <p><br />
  53.     jquery仿flash导航<br />
  54.     <br />
  55. </p>

  56. <p>注意:由于jquery文件是外部调用,比较慢,如预览有问题,请刷新页面或保存代码到本地查看。
  57. <br />
  58.     <br />
  59. </p>
  60. <p>*尊重他人劳动成果,转载请自觉注明出处!注:此代码仅供学习交流,请勿用于商业用途。</p>
  61. </body>
  62. </html>

您需要登录后才可以回帖 登录 | 立即注册

馨然玫瑰花茶

Archiver|手机版|Endige Inc   

GMT+8, 2017-9-26 22:37 , Processed in 0.046009 second(s), 13 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部