jquery - 图像元素不会缩放到 Firefox 或 Chrome 中的屏幕大小？

Question

我有一个单页网站，该网站仅在单击某个元素后才用于提供信息。

我几乎完成了所有事情，但我发现 div 元素只能在 Safari 中缩放。它在 Firefox 或 Chrome 中不起作用？

这是网站的链接 - Click Me

非常感谢任何帮助。需要注意的一点 - 背景图像很好。它只是现在造成问题的最上面的元素。

Answer 1

要处理您的规模问题:jQuery >= 1.8 会自动添加供应商前缀。所以代替:

 $('#outer').css({'-webkit-transform': 'scale(' + scale + ')'});

你可以这样写:

 $('#outer').css({'transform': 'scale(' + scale + ')'});

这应该可以解决您的 FireFox 问题。如果您使用旧版本的 jQuery，请查看 here .它是用于添加这些供应商前缀的插件。以下代码示例来自插件 CSSHooks。

(function($) {
  if ( !$.cssHooks ) {
    throw("jQuery 1.4.3+ is needed for this plugin to work");
    return;
  }

  function styleSupport( prop ) {
    var vendorProp, supportedProp,
        capProp = prop.charAt(0).toUpperCase() + prop.slice(1),
        prefixes = [ "Moz", "Webkit", "O", "ms" ],
        div = document.createElement( "div" );

    if ( prop in div.style ) {
      supportedProp = prop;
    } else {
      for ( var i = 0; i < prefixes.length; i++ ) {
        vendorProp = prefixes[i] + capProp;
        if ( vendorProp in div.style ) {
          supportedProp = vendorProp;
          break;
        }
      }
    }

    div = null;
    $.support[ prop ] = supportedProp
    return supportedProp;
  }

  // check for style support of your property 
  // TODO by user: swap out myCssPropName for css property
  var myCssPropName = styleSupport("myCssPropName");

  // set cssHooks only for browsers that
  // support a vendor-prefixed border radius
  if (myCssPropName && myCssPropName !== 'myCssPropName') {
    $.cssHooks["myCssPropName"] = {
      get: function(elem, computed, extra) {
        // handle getting the CSS property
        return $.css(elem, myCssPropName);
      },
      set: function(elem, value) {
        // handle setting the CSS value
        elem.style[myCssPropName] = value;
      }
    };
  }
})(jQuery);

反正你还没完，位置问题还是会存在。

更新

Here is the working fiddle - 从上面拿你的例子，并更正 css 行。在 FF、Safari 和 Chrome 中看起来正确。