jquery基本圖庫動畫

我做了一個基本的「畫廊」，使用下面的功能，當點擊縮略圖時顯示更大的圖片。我想製作一個動畫，將縮略圖轉換爲較大的圖像。例如，縮略圖可以滑動到更大圖像的位置並傳播到它或沿着這些線條的東西。jquery基本圖庫動畫

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目標圖像獲得從縮略圖到更大圖像的動畫過渡？

來源

2013-04-26 Fruktoosi

你可以做的事情格式...

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

這意味着你不需要點擊你的HTML處理。儘管如此，你會想要引用更大的圖像。可能位於不同的文件夾中。 source ='large /'+ $（this）.attr（'src'）

來源

2013-04-26 16:12:36 nick

jquery基本圖庫動畫

回答

相關問題