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>

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

Answer 1

您可以使用格式...

执行某些操作

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

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

Jquery基本画廊动画

1 个答案: