Jquery基本的画廊动画

Jquery basic gallery animation

本文关键字：动画 Jquery      更新时间：2023-09-26

我做了一个基本的"画廊"，它使用下面的函数来显示一个更大的图片，当点击缩略图。我想制作一个动画，将缩略图过渡到更大的图像。例如，缩略图可以滑动到大图的位置，并沿着这些线条扩散到大图或其他地方。

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>

这是代码，那么我应该如何修改函数来获得一个动画过渡从缩略图到更大的图像?

你可以用…

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

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

相关文章：