jQuery 图像/悬停预览导致 IE7 中出现断断续续的行为

Posted 2023-05-08

【中文标题】jQuery 图像/悬停预览导致 IE7 中出现断断续续的行为

【英文标题】：jQuery Image/Hover Preview Causing Choppy Behavior in IE7

【发布时间】：2011-01-12 06:21:18

【问题描述】：

我似乎在使用 jQuery 在 IE 中创建简单的缩放时遇到了一些问题。在 Firefox 中一切正常，但大多数用户报告 IE 不稳定。

我已禁用 IE 中的代码（使用 jQuery.browser.msie），但如果可能的话，我希望得到任何人的帮助。

我的 jquery 源代码如下（忽略支持函数）。

 this.imagePreview = function() 
 /* CONFIG */

  xOffset = 10;
  yOffset = 20;

  // these 2 variable determine popup's distance from the cursor
  // you might want to adjust to get the right result

 /* END CONFIG */
 $("a.preview").hover(function(e)
  this.t = this.title;
  this.title = "";
  this.inside = $(this).attr('inside')
  this.outside = $(this).attr('outside')
  var c = (this.t != "") ? "<br/>" + this.t : "";
  $("body").append("<p id='preview'><img width='260' src='"+ this.inside +"' />"+ c +"</p>");         
  $("#preview")
   .css("top",(e.pageY - xOffset) + "px")
   .css("left",(e.pageX + yOffset) + "px")
   .fadeIn("fast");      
    ,
 function()
  this.title = this.t; 
  $("#preview").remove();
    ); 
 $("a.preview").mousemove(function(e)
  $("#preview")
   .css("top",(e.pageY - xOffset) + "px")
   .css("left",(e.pageX + yOffset) + "px");
 );   
;
$(window).load(function()imagePreview(););

以下是相关网页之一的示例：http://www.engreet.com/CategoryDetail.aspx?cid=17。如果滚动到源代码，您会看到缩略图具有内部的翻转/悬停预览，使用如下代码：

<a href="/CardDetailFull.aspx?cid=670" outside="http://static.engreet.com/ArtistFiles/51/Happy_Bela_Front_633998103802577482.jpg" inside="http://static.engreet.com/ArtistFiles/51/Happy_Bela_InsideRight_633998103832264982.jpg" title="Inside Preview" class="preview">
 <img src='http://static.engreet.com/ArtistFiles/51/_128X178_Happy_Bela_Front_633998103802577482.jpg'   />
</a>

任何帮助将不胜感激。很高兴向某人发送一些免费卡的代码！

谢谢， 亚当

【问题讨论】：

这里没有要测试的 Windows，但是：对于那些抱怨您的实施的人来说，其他悬停示例如何工作？喜欢sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery？

还有：“断断续续”到底是什么意思？ learningjquery.com/2009/01/… 可以帮忙吗？

【参考方案1】：

问题最终是重复的透明背景 PNG 图像。它是 1x1 并填充了 755x600 的方形画布。通过将其增加到 25x25，所有问题都解决了。当最终是 IE 的疯狂渲染一直导致问题时，这个问题是如何通过影响 jQuery 显示出来的，这真是太疯狂了！

希望这对将来的人有所帮助。