谷歌浏览器中表单和鼠标悬停的jQuery问题答案

【问题标题】：jQuery issues with forms and mouseover in google chrome谷歌浏览器中表单和鼠标悬停的jQuery问题
【发布时间】：2011-10-21 07:30:39
【问题描述】：

我有一个包含在 iFrame 中的页面（其中嵌入了一个外部 html 页面）这个页面有一个表单，当鼠标悬停在表单提交按钮上时，它会在提交之前计算表单的隐藏值。

我还使用表单中的 smoothzoom 库 (http://codecanyon.net/item/smooth-zoom-pan-jquery-image-viewer/full_screen_preview/511142)。

一个示例计算是针对裁剪视图的左偏移计算的图像左偏移。

我已经检查了 chrome 和 firefox 中的元素。

鼠标悬停时，Firefox 中的所有隐藏字段都会更新。

在 chrome 中只有两个更新。 X 和 Y。

这是我正在使用的 jQuery。

var hovered = false;
$(function(){
   $('#image').smoothZoom({
      width: 270,
      height: 270,
      zoom_MAX: 600,
      animation_SPEED: 0.001,
      animation_SMOOTHNESS: 0,
      initial_ZOOM: '100',
      initial_POSITION: '0 0'
   });
   $('#headerImageCont').hover(function(){
      hovered = true;
   },function(){
      hovered = false;
   });
   $(window).bind("mousewheel", function(event, delta){
      if (hovered === true){
         return false;
      }
   });
   $('#saveButton').mouseover(function(){
      $('#x').val(-$('#image').position().left); //needs to be inverted
      $('#y').val(-$('#image').position().top); //needs to be inverted
      $('#ScaleX').val($('#image').width() / 500);
      $('#ScaleY').val($('#image').height() / 423);
      $('#Scale').val($('#image').width() / 500 * 100);
      $('#target_width').val($('#headerImageCont').width());
      $('#target_height').val($('#headerImageCont').height());
      $('#actual_width').val($('#image').width());
      $('#actual_height').val($('#image').height());
   });
});

【问题讨论】：

尝试在 Firebug lite 中对它们使用断点... Dosent 似乎您的 jquery 中有任何错误。你能在 jsfiddle 中重新制作场景吗？
我想我已经缩小了范围，检查模式下的图像没有显示它的宽度。因此 jQuery $('#image').width();似乎没有工作。 .width() 有什么替代品吗？
嗯，它应该测量宽度......所以它应该没关系。你确定它能找到图片吗？
我想我已经找到了问题，但没有找到解决方案。 Firefox 以不同的方式进行翻译，它实际上改变了宽度和高度。 chrome 使用 webkit 来翻译 3d。那么有什么方法可以让 translate3d 尤其是比例？
如果你这样做会得到什么 $('#image').css('-webkit-transform');

标签： javascript jquery google-chrome iframe

【解决方案1】：

chrome 中的图像在此特定浏览器中未使用宽度和高度。相反，我将原始宽度和高度乘以比例 X 和 Y。

这可以通过这段代码使用 chromes webkit 值来实现。 http://jsfiddle.net/umZHA/

我希望这对某人有所帮助。

感谢马可的帮助

【讨论】：