Question

我找到了各种方法来为翻转图像添加一个漂亮的淡入淡出过渡，但没有人真正说明如何将脚本应用到HTML文档

这是我到目前为止所得到的...如何添加fadeIn，fadeOut脚本？而不是只是从图像轻弹到图像

<img src="images/portfolio.jpg" alt="" width="155" height="150" id="portfolio" 
onmouseover="MM_swapImage('portfolio','','images alt/index-alt_12.jpg',1)"
    onmouseout="MM_swapImgRestore()" />

以下是HTML文档中的全部内容。

<td colspan="2" rowspan="5" align="left" valign="top"><a href="portfolio.html"><img src="images/portfolio.jpg" alt="" width="155" height="150" id="portfolio" onmouseover="MM_swapImage('portfolio','','images alt/index-alt_12.jpg',1)"
    onmouseout="MM_swapImgRestore()" /></a></td>

如何隔离'index-alt_12.jpg'并为其创建ID标签？我在哪里放这些代码？

Answer 1

由于您使用的是鼠标悬停，我认为您只有两张图片吗？

你可以不用javascript来做到这一点。它仍然适用于旧版浏览器，但动画淡入淡出仅适用于webkit，ie10和mozilla。它只是一个问题，如果你必须在旧版本的IE上淡入淡出。

你可以做的是放置两张图像，一张放在另一张图像上。

例如 - 假设通过css将其置于另一个之上

<img class="imageA" src="a.jpg" />
<img src="b.jpg" />

关于css

.imageA {
   -webkit-transition: all 300ms ease;
   -moz-transition: all 300ms ease;
   -o-transition: all 300ms ease;
   transition: all 300ms ease;
   opacity: 1;
}

.imageA:hover {
   opacity: 0;
}

您也可以使用过渡从任何一个css属性动画到另一个属性。下面的图像也可以是下面建议的容器的背景图像，而不是两个图像，但仍然纯粹通过CSS进行。

Answer 2

你在使用jQuery吗？如果是这样，那么有一个很好的解决方案！在HTML页面的底部（在您包含jQuery的地方），您可以使用以下内容：

$(document).ready(function() {
  $("#portfolio").mouseover(function() {
    $("#img1").fadeTo(200, 1); 
    // The above means take 200ms to fade to an opacity of 1.0 (fully opaque).
    $("#img2").fadeTo(200,0);
    // The above says the same thing, but for fading out
  });
});

如果您稍微玩一下，可以让它们来回切换，具体取决于显示的内容，但这是一般的想法。

瞧！我知道你正在寻找一个javascript的答案，但是jQuery对于这样的东西非常有用，并且会强烈推荐给你。

Answer 3

您尝试使用硬编码图像的方式存在错误，但您可以切换到CSS作为解决方法。

首先，我会设置一个div并使portfolio.jpg成为背景图片：

HTML：

<div id="portfolio"></div>

CSS：

#portfolio {
    background:url('images/portfolio.jpg') no-repeat;
    height: 150px;
    width: 155px;
}

这是一种在鼠标悬停时淡出#portfolio，在新背景图片中交换，然后淡入div的方法。需要jQuery 1.0 +

$('#portfolio').mouseover(function() {
    var self = $(this);
    self
        .fadeOut('slow', function() {
            self
                .css('background-image', 'url("images alt/index-alt_12.jpg")')
                .fadeIn('slow');
        });
});

如何将fadeIn - fadeOut转换添加到交换图像

3 个答案: