JavaScript滚动图片库在Chrome或IE中不起作用

JavaScript rollover image gallery not working in Chrome or IE

本文关键字：IE 不起作用 Chrome 滚动 图片库 JavaScript      更新时间：2024-02-14

我建立了一个小的图像库，它可以使用JavaScript滚动。我还添加了一些jquery来增强图像。我的问题是，在Firefox中一切都很完美，但在IE或Chrome中却不行。所有内容都会显示在IE和Chrome中，但当你点击缩略图时，大图像不会填充。

当前页面代码：

<a href="#" onmouseup = "window.document.gallery.src = 'images/Gallery/Landscapes_Album/slides/Tern Lake Sunset.jpg'">
<img src="images/Gallery/Landscapes_Album/thumbs/Tern Lake Sunset.jpg" width="80" height="80" class="gallery-thumb" id="In"/></a>

当前jquery代码：

// jQuery fade-in and fade-out
$(function() {
  // OPACITY OF BUTTON SET TO 50%
  $(".gallery-thumb").css("opacity","0.5");
  // ON MOUSE OVER
  $(".gallery-thumb").hover(function () {
    // SET OPACITY TO 100%
    $(this).stop().animate({
       opacity: 1.0
      }, "slow");
    },
    // ON MOUSE OUT
    function () {
    // SET OPACITY BACK TO 50%
    $(this).stop().animate({
      opacity: 0.5
    }, "slow");
  });
});

chrome中的错误是"无法将属性src设置为undefined"。这是因为表达式window.document.gallery的求值不为任何值。正如MrOBrian所指出的，我看不出这在任何浏览器中是如何工作的。

html的另一种实现方式可以是：

<a href="#" onmouseup="$(this).find('img').attr('src', 'yourimage.jpg')">
    <img src="http://placekitten.com/80/80" width="80" height="80" class="gallery-thumb" id="In"/></a>​

尽管如果你只是在javascript:中的某个地方做这件事，它会更标准

$(".gallery-thumb").parent().mouseup(function() {
    $(this).find('img').attr('src', 'yourimage.jpg');
});

我设置了一个jsFiddle供您使用：http://jsfiddle.net/ZfkeU/10/

使用css实现此效果：

<a href="#">
<img class="img1" .../>
<img class="img2" .../>
</a>

css：

a{position:relative;}
a img{position:absolute;top:T;left:L;}
a img.img1{ z-index:101;}
a img.img2{ z-index:100;}
a:hover img.img1{ display:none;}

更简单、更干净。。。

相关文章：