1

这是我关于 Cufon 字体的第一篇文章，因为我是 jquery 和 javascript 的新手。我正在尝试在菜单上创建垂直鱼眼效果，即在文本上。我想要的是当我将鼠标悬停在当前菜单上时，当前菜单的字体大小以及上下 2 个子菜单的字体大小应该会平滑变化。在使用 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();
   })
  })
4

0 回答 0