javascript - jquery 基本画廊动画

Question

我制作了一个基本的“图库”，它使用下面的功能在单击缩略图时显示更大的图片。我想制作动画以将缩略图转换为更大的图像。例如，缩略图可以滑动到较大图像的位置并沿着这些线传播到它或其他东西。

function Kuvansuurennus(pic)
    {
        document.getElementById("peukalokuva").style.visibility="visible"
        document.getElementById("peukalokuva").src=pic
    }

我使用的一些样式定义

.thumb
    {

        height:150px;
        width:200px;
    }
    #peukalokuva
    {
        float:right;
        margin-right:4%;

        width:70%;
        visibility:hidden;
    } 

以及我使用的图像和更大图像的目标图像

<img id="peukalokuva">
    <div>
    <img class="thumb" src="kuva1.jpg" onclick="Kuvansuurennus(this.src)"/>
    <br>
    <img class="thumb" src="kuva2.jpg" onclick="Kuvansuurennus(this.src)"/>
    <br>
    <img class="thumb" src="kuva3.jpg" onclick="Kuvansuurennus(this.src)"/>
    <br>
    <img class="thumb" src="kuva4.jpg" onclick="Kuvansuurennus(this.src)"/>
    <br>
    <img class="thumb" src="kuva5.jpg" onclick="Kuvansuurennus(this.src)"/>
    <br>
    <img class="thumb" src="kuva6.jpg" onclick="Kuvansuurennus(this.src)"/>
    </div>

这就是代码，那么我应该如何修改函数以获得从缩略图到大图的动画过渡？

Answer 1

你可以用...的格式做一些事情

$('img.thumb').click(function(){
    var source = $(this).attr('src');
    $('#peukalokuva').show().attr('src', source);
});

这意味着您不需要在 html 中使用点击处理程序。不过，您可能想要引用更大的图像。可能在不同的文件夹中。 source = 'large/' + $(this).attr('src')