切换淡入的图像 - Switching image with a fade in

Switching image with a fade in

本文关键字：图像淡入 | 更新日期: 2023-09-27

我正在这里的一个网站上工作：

http://mccarronandco.com/newsite/modena.php

他们

现在决定，他们希望图片在您单击缩略图时淡入，而不仅仅是切换图像。当前代码为：

<div id="mainimage">
    <img src="images/modena/2.jpg"  alt="holder"  name="holder" id="holder">
</div>
<div class="gallerycontainer">     
    <div class="thumbnail">
        <img src="images/modena/thumbs/2.jpg" alt="Modena" name="modena" width="75" height="56" title="Modena" onClick="document.holder.src='images/modena/2.jpg'" >
    </div>

谁能提出我实现这一目标的方法？我不知道从哪里开始，我从一个论坛上得到了上面的代码......

非常感谢，

安迪

我不确定如何做到这一点是纯JavaScript，但是您是否使用jQuery库？它有fadeIn（）和fadeOut（）方法，使这种事情变得非常容易。您将创建一个类似

function fadeImage(imageURL)
{
    $("#holder img").fadeOut(300, function(){
        $("#holder img").attr('src', imageURL);
        $("#holder img").fadeIn();
    });
}

然后调用它并传递要淡入的图像的 URL。

这个jQuery插件将允许您在用户单击其中一个图像时简单地调用以下方法来循环浏览图像。

$('#fade').cycle();

一个简单的解决方案是将图像持有者的 CSS 设置为，

#mainimage
{
    -webkit-transition: background-image 0.2s ease-in-out;
    -moz-transition: background-image 0.2s ease-in-out;
    -ms-transition: background-image 0.2s ease-in-out;
    -o-transition: background-image 0.2s ease-in-out;
    transition: background-image 0.2s ease-in-out;
}

而不是img标记，而是使用背景图像 CSS 属性。并编辑这一行，

<img src="images/modena/thumbs/2.jpg" alt="Modena" name="modena" width="75" height="56" title="Modena" onClick="document.holder.style.backgroundImage = 'images/modena/2.jpg'" >

这样，您就不必包含任何插件。

你可以实现 jQuery 来做到这一点。下载JS文件或使用托管jQuery的CDN并将其添加到您的网站<head>部分

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

然后将以下代码添加到<head>部分：

<script type="text/javascript">
function SetImg(URL) {
    //Fade out the Current Image
    $('#holder').fadeOut('slow', function() {
        //Set the new Image URL
        $('#holder').attr('src', URL);
        //Fade In the new image
        $('#holder').fadeIn();
    });
}
</script>

您的 IMG html 将变为：

<img src="images/modena/thumbs/2.jpg" alt="Modena" name="modena" width="75" height="56" title="Modena" onClick="SetImg('images/modena/2.jpg');" >

这样做是将 Img 标签的 onclick 事件绑定到函数 SetImg ，然后传递要设置它的图像的 URL。在 SetImg 函数中，它查找带有 ID = holder 的控件并设置 SRC 属性。然后调用该元素的 fadeIn() 函数。

有关 API 的更多信息，请参阅 jQuery API 文档。

编辑：（回答评论问题）

代码仅淡入新图像：

<script type="text/javascript">
function SetImg(URL) {
   //Hide current image
   $('#holder').hide();
   //Set the new Image URL
   $('#holder').attr('src', URL);
   //Fade In the new image
   $('#holder').fadeIn();
}
</script>