Question

这是我关于Cufon字体的第一篇文章，因为我是jquery＆amp;的新手。 JavaScript的。我试图在菜单上创建垂直鱼眼效果，即文本。我想要的是当我将鼠标悬停在当前菜单上时，当前菜单的字体大小以及上下两个子菜单的字体大小都应该顺利改变。它在使用Cufon字体之前工作正常，但是现在那里延迟约1/2秒会影响效果的平滑度。

这是我的html文件.....................

    <html>
    <head>
    <script type="text/javascript" src="js/cufon-yui.js"></script>
    <script type="text/javascript" src="js/my-custom-font_400.font.js"></script>
   <script type="text/javascript">
     Cufon.replace('#scroller ul li a', { 
     fontFamily: 'my-custom-font',
     hover:true
   });
   </script>
   </head>
   <body>
     <div id="rollerBox">
           <div id="scroller" >    
                    <ul id="innerContainer">
                        <li class="pictures1"><a href="#">link1</a></li>
                        <li class="pictures2"><a href="#">link2</a></li>
                        <li class="pictures3"><a href="#">link3</a></li>
                        <li class="pictures4"><a href="#">link4</a></li>
                        <li class="pictures3"><a href="#">link5</a></li>
                        <li class="pictures4"><a href="#">link6</a></li>
                  </ul> <!-- #keywords -->                      
           </div> <!-- #scroller -->                     
      </div> <!-- #rollerBox --
    </body>
   </html>

这是我的鱼眼效果代码（在文本菜单上）.........

    $(document).ready(function(){
      $("#scroller ul li a").hover(function(){
         $(this).css({"font-size":"28px","color":"green"})
         $(this).parent().next().children().css({"font-size":"26px"})
         $(this).parent().prev().children().css({"font-size":"26px"})
         $(this).parent().nextAll().eq(1).children().css({"font-size":"25px"})
         $(this).parent().prevAll().eq(1).children().css({"font-size":"25px"})
        Cufon.refresh();
   },function(){   
         $(this).css({"font-size":"24px","color":"white"})
         $(this).parent().next().children().css({"font-size":"24px"})
         $(this).parent().prev().children().css({"font-size":"24px"})
         $(this).parent().nextAll().eq(1).children().css({"font-size":"24px"})
         $(this).parent().prevAll().eq(1).children().css({"font-size":"24px"})
       Cufon.refresh();
   })
  })

cufon font-size在悬停事件中不会平滑变化，以便在菜单（文本）上产生鱼眼效果

0 个答案: