1

所需的效果似乎被称为/类似于 Bubble-up 或 FishEye 示例：

我看过一些示例/插件，但都有问题/限制，最值得注意的是：

  • 无法通过键盘访问 需要
  • 预设高度/宽度影响
  • 前面/后面的项目/元素
  • 浏览器兼容性问题

我已经调整了一些现有的示例，但我得到的明显印象是它没有像应有的那样精简，并且它的行为有一些小错误。

理想情况下，以下将起作用；
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>

我已经注释掉了一些代码（例如字体大小的东西）。那是由于我有一个“错误”。

我认为我在使用键盘/鼠标方面做得很好。
我想我已经设法处理了一些额外的属性（例如 z-index 和 font-size）——但只是在一定程度上

问题。
1) 脚本要求受影响的项目定义一个 z-index。是否可以检查这一点，如果没有定义 z-index，脚本设置一个？
2）字体大小调整似乎会导致问题 - 悬停时调整大小的文本很大，而不是我假设的“缩放”（我将 fs 设置为 em，调整文本大小，悬停时它很大，并且没有悬停后返回正常大小）
3）代码看起来臃肿？我假设有更好的方法来做这些事情。
4）动画输入和动画输出的速度 - 可能吗？

4

1 回答 1

0

我看到的第一个问题是您在 DOM 就绪事件中有一个 DOM 就绪事件。

这是我的代码版本，带有优化注释。我引入了更多局部变量来清理全局范围。我已经删除了匈牙利符号，但如果你愿意，你可以把它放回去：

//<![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 回答