2

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

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>

任何人都可以建议我可以实现这一目标的方法吗？我不知道从哪里开始，我从一个论坛得到了上面的代码......

非常感谢，

安迪

4

4 回答 4

0

一种简单的解决方案是将图像持有者的 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标签，使用 background-image 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'" >

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

于 2013-09-27T12:28:32.363 回答
0

我不确定如何使用纯 JavaScript 来做到这一点，但你有没有通过使用jQuery库来做到这一点？它有fadeIn()和fadeOut()方法使这类事情变得非常容易。你会创建一个像

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

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

于 2013-09-27T12:05:14.850 回答
0

您可以实现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');" >

onclick它的作用是将Img 标记的事件绑定到 function 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>
于 2013-09-27T12:05:27.770 回答
0

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

$('#fade').cycle();
于 2013-09-27T12:07:44.860 回答