1

望ましい効果は、バブルアップまたはフィッシュアイの例と呼ばれる/類似しているように見えるものです。

いくつかの例/プラグインを見てきましたが、すべてに問題/制限があり、最も注目すべきものは次のとおりです。

  • キーボードでアクセスできない
  • プリセットの高さ/幅 影響
  • 前後の項目・要素
  • ブラウザの互換性の問題

既存の例のいくつかを微調整しましたが、本来あるべきほど合理化されておらず、動作に小さなバグがあるという明確な印象を受けます。

理想的には、以下が機能します。
1) 拡大のためのスケールを
許可します 2) 影響を受ける任意の要素を指定できます
3) 高さ/幅/その他のプロパティを自動的に処理します
4) プロパティが存在しない/空の場合に管理します
5) それは周囲/前の要素には影響しません（クローン/ホルダー要素を残しながら絶対に配置されます）

これまでのコードは次のとおりです。

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {

// NOTE: the element to become enlarged must have a z-index value!  (even if you set it as 1)
$(function(){
  function fatOnHover($elements, zoomSize, animationSpeed){
  $elements.each(function(i){
     var $wrap, height, width, left, bigWidth, bigHeight, $that = $(this);

  // Get the item height/width, and create the enlarged dimensions
     height = $that.height();
     width = $that.width();
  bigWidth = (width / 100) * zoomSize;
     bigHeight = (height / 100) * zoomSize;

  // Calculate the positioning (negative pull) based on the size difference of normal to enlarged
  left = (bigWidth - width) / 2;
  top = (bigHeight - height) / 2;

  // Addition for Text enlargening (gets font-size and sets enlarged font-size) (should accept any measurement (px/em etc.))
  //currFontSize = $that.css("font-size");
  //fontSize = parseFloat(currFontSize, 10);
  //fontEnding = currFontSize.slice(-2);
  //bigfontsize = (fontSize / 100) * zoomSize;

  // Get and Set the z-index = MUST make sure the item to be enlarged has a z-index (even if set to 1)
  // Ideally - should detect if there is a value, if not, set one
  currzindex = parseInt($that.css('z-index'));
  //currzindex = 100;
  zindexoffset = 900;
  bigZindex = currzindex + zindexoffset;



  // Insert div before/around the item to be enlarged (and to the same height/width)
      $wrap = "<div style='width: " + width + "px; height: " + height + "px; position: relative;'></div>",

   // Actually - no idea what all of this is for :D
      $that.data({"width": width, "height": height, "bigWidth": bigWidth, "bigHeight": bigHeight, "left": left, "top": top, /*"fontSize": fontSize, "bigfontsize": bigfontsize, "fontEnding": fontEnding,*/ "currzindex": currzindex, "bigZindex": bigZindex})
          .wrap($wrap)
   })

   // Define function/behavious for focus/hover
   .bind('mouseenter mouseover focus',
     function(){
        var $that = $(this);
        $that.stop().css('z-index', $that.data("bigZindex")).animate({"width": $that.data("bigWidth"), "height": $that.data("bigHeight"), "left": -$that.data("left"), "top": -$that.data("top")/*, "fontSize": $that.data("bigfontsize")+$that.data("fontEnding")*/}, animationSpeed);
     })

   // Define function/behavious for loss of focus/hover (normal)
 .bind('mouseleave mouseout blur',
     function(){
        var $that = $(this);
        $that.stop().css('z-index', $that.data("currzindex")).animate({"width": $that.data("width"), "height": $that.data("height"), "left": '0', "top": '0'/*, "fontSize": $that.data("fontSize")+$that.data("fontEnding")*/}, animationSpeed);
     })

  // Assigns position absolute to item to be enlarged
  .css("position", "absolute")
   }
   fatOnHover($('#nav li a'), 135, 900);
})

});
//]]>
</script>

コードの一部 (フォントサイズなど) をコメントアウトしました。それは私が持っている「バグ」の1つによるものです。

キーボード/マウスで作業するのは正しいと思います。
追加のプロパティ (z-index や font-size など) のいくつかを処理できたと思いますが、ある程度までしか処理できませんでした

問題。
1) スクリプトでは、影響を受けるアイテムに z-index が定義されている必要があります。これをチェックして、z-index が定義されていない場合、スクリプトで設定することは可能ですか?
2）フォントのサイズ変更は問題を引き起こすようです - ホバー時のサイズ変更されたテキストは巨大であり、「スケーリングする」と想定していたものではありません（fsをemとして設定し、テキストのサイズを変更しましたが、ホバー時に巨大でありませんホバー後に通常のサイズに戻ります)
3) コードが肥大化しているように見えますか? このようなことのいくつかを行うためのより良い方法があると思います。
4) アニメーション インとアニメーション アウトの速度 - 可能ですか?

4

1 に答える 1

0

最初の問題は、DOM Ready イベントの中に DOM Ready イベントがあることです。

これが、最適化がコメントされた私のバージョンのコードです。グローバル スコープをクリーンアップするために、より多くのローカル変数を導入しました。ハンガリー語表記を削除しましたが、必要に応じて元に戻すことができます。

//<![CDATA[
    $(function() {
        var fatOnHover = function(elements, zoomSize, animationSpeed) {
            elements.each(function() {
                var wrap, options, tempZ, currFontSize, zindexoffset = 900, element = $(this);
                tempZ = element.css('z-index');
                currFontSize = element.css('font-size')
                options = {
                    height : element.height(),
                    width : element.width(),
                    fontSize : parseFloat(currFontSize, 10),
                    fontEnding : currFontSize.slice(-2),
                    currzindex : (tempZ === undefined || tempZ === 'auto') ? 100 : parseInt(tempZ)
                };
                $.extend(options, {
                    bigWidth : (options.width / 100) * zoomSize,
                    bigHeight : (options.height / 100) * zoomSize,
                    bigZindex : options.currzindex + zindexoffset,
                    bigfontsize : (options.fontSize / 100) * zoomSize
                });
                $.extend(options, {
                    left : (options.bigWidth - options.width) / 2,
                    top : (options.bigHeight - options.height) / 2
                });

                wrap = ['<div style="height:',options.height,'px;width:',options.width,'px;position:relative;"></div>'].join('');
                element.data(options).wrap(wrap);
            })
            // Define function/behavious for focus/hover
            .bind('mouseenter mouseover focus', function() {
                var element = $(this);
                element
                    .css('z-index', element.data('bigZindex'))
                    .stop()
                    .animate({
                        'width':element.data('bigWidth'),
                        'height':element.data('bigHeight'),
                        'left':-element.data('left'),
                        'top':-element.data('top'),
                        'fontSize':[
                            element.data('bigfontsize'),
                            element.data('fontEnding')
                        ].join('')
                    }, animationSpeed);
            })
            // Define function/behavious for loss of focus/hover (normal)
            .bind('mouseleave mouseout blur',
                function() {
                    var element = $(this);
                    element
                        .css('z-index', element.data('currzindex'))
                        .stop()
                        .animate({
                            'width':element.data('width'),
                            'height':element.data('height'),
                            'left':'0',
                            'top':'0',
                            'fontSize':[
                                element.data('fontSize'),
                                element.data('fontEnding')
                            ].join('')
                        }, animationSpeed);
            })
            // Assigns position absolute to item to be enlarged
            .css('position', 'absolute')
        };
        fatOnHover($('#nav li a'), 200, 100);
    });
    //]]>

上記のコードは、テキストを問題なくアニメーション化します。FF、Chrome、IE7 でテスト済み。

于 2010-11-24T20:31:40.390 に答える