首页论坛

jQuery的一个问题。。。

投稿人：soguagirl

http://www.googleft.com.cn/google/

我写的一个仿Google导航的效果。现在的问题是，当mouseover的时候，似乎也触发了mouseout。致使那个图标一直跳来跳去的:Q
试着unbind()，貌似可以解决。请教各位有更好的办法嘛？
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2310">
  5. <title>Google</title>
  6. <style type="text/css">
  7. * {margin:0;padding:0;}
  8. body {font-size:12px;}
  9. a {text-decoration:none;color:#000;}
  10. a:hover {text-decoration:underline;color:#c10000;}
  11. #Wrapper ul {text-align:center;list-style:none;}
  12. #Wrapper li {float:left;width:52px;margin:0 10px;}
  13. #Wrapper li p {width:52px;height:37px;overflow:hidden;background-image:url(svc_sprite_all.gif);}
  14. .a1 {background-position:0 0;}
  15. .a2 {background-position:0 -37px;}
  16. .a3 {background-position:0 -74px;}
  17. .a4 {background-position:0 -110px;}
  18. .a5 {background-position:0 -147px;}
  19. .a6 {background-position:0 -184px;}
  20. .a7 {background-position:0 -221px;}
  21. </style>
  22. <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
  23. <script type="text/javascript">
  24. $(function(){
  25.         $("#Wrapper li").mouseover(
  26.                 function(){var j=$(this).index();Show(j)}
  27.         );
  28.         $("#Wrapper li").mouseout(
  29.                 function(){var j=$(this).index();Hide(j)}
  30.         );
  31. });
  32. var i=0;
  33. function Show(j)
  34. {
  35.         $("#Wrapper li:eq("+j+") p").css("background-position",""+i*-52+"px "+j*-37+"px");
  36.         i+=1;
  37.         if(i>6){i=0;return;};
  38.         setTimeout("Show("+j+")",40);
  39. }
  40. function Hide(j)
  41. {
  42.         $("#Wrapper li:eq("+j+") p").css("background-position",""+i*52-312+"px "+j*-37+"px");
  43.         i+=1;
  44.         if(i>6){i=0;return;};
  45.         setTimeout("Hide("+j+")",40);
  46. }
  47. </script>
  48. </head>
  49. <body>
  50.         <div id="Wrapper">
  51.             <ul>

  53.                 <li><p class="a1"></p><a href="#">a1</a></li>
  54.             <li><p class="a2"></p><a href="#">a1</a></li>
  55.             <li><p class="a3"></p><a href="#">a1</a></li>
  56.             <li><p class="a4"></p><a href="#">a1</a></li>
  57.             <li><p class="a5"></p><a href="#">a1</a></li>
  58.             <li><p class="a6"></p><a href="#">a1</a></li>

  60.             <li><p class="a7"></p><a href="#">a1</a></li>
  61.         </ul>
  62.     </div>
  63. </body>
  64. </html>

最新评论
  • messengerhot: 复制上去 完全没有任何的显示呀。
  • lyqfiend: $("#Wrapper li").mouseover(function(even
  • soguagirl: 我尝试了unbind("mouseover")  unbin
  • lyqfiend: “当mouseover的时候，似乎也触发了mouseout" 会不会是事件冒泡的原因，传
更多评论...