0

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

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>

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

4

1 回答 1

0

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

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

这意味着您的 html 中不需要单击处理程序。不过，您可能希望参考更大的图像。可能在不同的文件夹中。源 = '大/' + $(this).attr('src')

于 2013-04-26T16:12:36.323 回答