在悬停/聚焦时放大文本/图像(气泡/鱼眼?)

所需的效果似乎被称为/类似于 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)动画输入和动画输出的速度 - 可能吗?

stack overflow Enlarge text/image on hover/focus (bubble-up / fisheye ?)
原文答案

答案:

作者头像

The first problem I see is that you have a DOM ready event inside of a DOM ready event.

Here's my version of your code with optimizations commented. I've introduced more local variables to clean up the global scope. I've removed Hungarian notation, but you can put it back in if you like:

//<![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);
    });
    //]]>  

The above code animates text no problem. Tested in FF, Chrome and IE7.