jQuery基本画廊动画答案

【问题标题】：Jquery basic gallery animationjQuery基本画廊动画
【发布时间】：2013-04-27 00:12:36
【问题描述】：

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

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>

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

【问题讨论】：

标签： javascript jquery html css image-gallery

【解决方案1】：

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

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

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

【讨论】：