һ
 ¼ע

QQ¼

ֻһٿʼ

̳ WEBҳǰ뿪 ǰ̨ű

jQueryĶ

[]
19340 websjy 2011-2-22 18:27:45
| ʾȫ¥
1F


ʾ
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>jsĶ</title>
  6. <style>body {
  7.         background:#000 ;
  8.          margin: 0px;
  9.         padding: 0px;
  10.         font-family: "΢ź", "";
  11.         font-size: 12px;
  12.         color: #CCCCCC;
  13. }
  14. .cls {clear: both;}a:focus { outline: none; }

  15. .xgsm {
  16.         padding: 0px;
  17.         width: 800px;
  18.         margin-top: 40px;
  19.         margin-right: auto;
  20.         margin-bottom: 20px;
  21.         margin-left: auto;
  22. }
  23. .xgsm p {
  24.         line-height: 1.8em;
  25.         padding: 0px;
  26.         margin: 0px;
  27.         color: #666666;
  28. }
  29. .menu {
  30.         height: 40px;
  31.         display: block;
  32.         padding: 0px;
  33.         width: 800px;
  34.         margin-top: 0px;
  35.         margin-right: auto;
  36.         margin-bottom: 40px;
  37.         margin-left: auto;}
  38. .menu ul {list-style: none;padding: 0;margin: 0;}
  39. .menu ul li {
  40.         /* width and height of the menu items */  
  41.         float: left;
  42.         overflow: hidden;
  43.         position: relative;
  44.         line-height: 40px;
  45.         text-align: center;}
  46. .menu ul li a {/* must be postioned relative  */
  47.                 position: relative;
  48.                         display: block;
  49.                         width: 90px;
  50.                         height: 40px;
  51.                         font-family: "΢ź", "";
  52.                         font-size: 12px;
  53.                         text-decoration: none;
  54.                         cursor: pointer;
  55. }
  56. .menu ul li a span {/* all layers will be absolute positioned */
  57.                         position: absolute;
  58.                         left: 0;
  59.                         width: 90px;
  60. }
  61. .menu ul li a span.out {top: 0px;}
  62. .menu ul li a span.over,
  63. .menu ul li a span.bg {/* hide */top: -40px;}
  64. /** 1st example **/
  65. #menu1 {
  66.         background-color: #E8E8E8;
  67.         background-image: url(http://www.websjy.com/bbs/images/menu_bg.gif);
  68.         background-repeat: repeat-x;
  69.         background-position: 0px 0px;
  70. }
  71. #menu1 ul li a {color: #000;}
  72. #menu1 ul li a span.over {color: #FFF;}
  73. #menu1 ul li span.bg {
  74.         /* height of the menu items */  
  75.         height: 40px;
  76.         background-image: url(http://www.websjy.com/bbs/images/bg_over.gif);
  77.         background-repeat: no-repeat;
  78.         background-position: center center;
  79. }               
  80. /** 2nd example **/
  81. #menu2 {background: #000;}               
  82. #menu2 ul li a {color: #999999;}
  83. #menu2 ul li a span.over {color: #000;background-color: #f0f0f0;}</style>
  84. <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
  85. <script language="javascript">
  86.                 $(document).ready(function() {

  87.                         /*         1st example        */

  88.                         /// wrap inner content of each anchor with first layer and append background layer
  89.                         $("#menu1 li a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );

  90.                         // loop each anchor and add copy of text content
  91.                         $("#menu1 li a").each(function() {
  92.                                 $( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
  93.                         });

  94.                         $("#menu1 li a").hover(function() {
  95.                                 // this function is fired when the mouse is moved over
  96.                                 $(".out",        this).stop().animate({'top':        '40px'},        250); // move down - hide
  97.                                 $(".over",        this).stop().animate({'top':        '0px'},                250); // move down - show
  98.                                 $(".bg",        this).stop().animate({'top':        '0px'},                120); // move down - show

  99.                         }, function() {
  100.                                 // this function is fired when the mouse is moved off
  101.                                 $(".out",        this).stop().animate({'top':        '0px'},                250); // move up - show
  102.                                 $(".over",        this).stop().animate({'top':        '-40px'},        250); // move up - hide
  103.                                 $(".bg",        this).stop().animate({'top':        '-40px'},        120); // move up - hide
  104.                         });
  105.                                        

  106.                         /*        2nd example        */
  107.                         
  108.                         $("#menu2 li a").wrapInner( '<span class="out"></span>' );
  109.                         
  110.                         $("#menu2 li a").each(function() {
  111.                                 $( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
  112.                         });

  113.                         $("#menu2 li a").hover(function() {
  114.                                 $(".out",        this).stop().animate({'top':        '40px'},        300); // move down - hide
  115.                                 $(".over",        this).stop().animate({'top':        '0px'},                300); // move down - show

  116.                         }, function() {
  117.                                 $(".out",        this).stop().animate({'top':        '0px'},                300); // move up - show
  118.                                 $(".over",        this).stop().animate({'top':        '-40px'},        300); // move up - hide
  119.                         });

  120.                 });

  121.         </script>
  122. </head>

  123. <body>
  124. <div class="xgsm">
  125. <p>һЧȴ򿪷ļ۲ЧЧʵЧHTMLһΡȻ鿴ԭļļǷ磺JSļҽűļҲǶģCSSļһʽҲǶģIMAGESļпһЩͼļ</p>
  126. <p>ֲЧһõЧԼҳֲʱҪ⼸棺ȽЧõļƵԼվļӦλУű/ʽ/ͼ񣩡HTMLθƵԼҳТӶӦʽ뢴ӶӦĽű롣ܵ˵Ϊһļƴ롣</p>
  127. </div>
  128. <div id="menu1" class="menu">
  129.         <ul>
  130.         <li><a href="#">סҳ</a></li>
  131.         <li><a href="#">ҵĻ</a></li>
  132.         <li><a href="#">Ʒչʾ</a></li>
  133.         <li><a href="#"></a></li>
  134.         <li><a href="#"></a></li>
  135.         <li><a href="#">˴</a></li>
  136.         <li><a href="#">ѯ</a></li>
  137.         </ul>
  138.         <div class="cls"></div>
  139. </div>

  140. <div id="menu2" class="menu">
  141.         <ul>
  142.         <li><a href="#">סҳ</a></li>
  143.         <li><a href="#">ҵĻ</a></li>
  144.         <li><a href="#">Ʒչʾ</a></li>
  145.         <li><a href="#"></a></li>
  146.         <li><a href="#"></a></li>
  147.         <li><a href="#">˴</a></li>
  148.         <li><a href="#">ѯ</a></li>
  149.         </ul>
  150.         <div class="cls"></div>
  151. </div>

  152. </body>
  153. </html>
ƴ
Ѿͬ websjy΢

аԴ

Ҫ ¼ ſػ鿴ûʺţ¼ע  

x
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ
б

ֹ

̳¡ͼƬѷϴվԭתԻ,µİȨԭ
վַİȨ֪ͨǵĹԱ,Ա(Email:admin@websjy.com)ʱȡȨɾ
ܾκκʽڱ̳л񹲺͹ִ!

QQ| 42011102000510|Archiver|ֻ|Դ ( ICP14013341-1

GMT+8, 2019-6-20 11:04

Powered by Discuz! X3.2

ԴԴվ  ԴAPPӦ֮

ٻظ ض б