1

jqueryとjavascriptを初めて使用するため、これはCufonフォントに関する最初の投稿です。メニュー、つまりテキストに垂直魚眼効果を作成しようとしています。私が欲しいのは、現在のメニューにカーソルを合わせると、現在のメニューのフォントサイズと、上下の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