1

我发现了各种向翻转图像添加漂亮的淡入淡出过渡的方法，但没有一个真正说明如何将脚本应用于 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()" />

这是 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 标签？我在哪里放那个代码？

4

3 回答 3

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 完成。

于 2013-03-30T13:49:40.617 回答
0

你在使用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 对此类问题非常有帮助，并且强烈推荐给您。

于 2013-03-30T13:37:57.543 回答
0

您尝试使用硬编码图像执行此操作的方式存在错误，但您可以切换到 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');
        });
});
于 2013-03-30T13:48:24.543 回答