令人印象深刻的響應式JavaScript效果。怎麼做？

最近我遇到了一個非常好的響應javascript我想實現自己。你可以在這裏看到一個例子：令人印象深刻的響應式JavaScript效果。怎麼做？

http://themes.iki-bir.com/alphine-wp/#！（通過按任何縮略圖）。對縮略圖進行排序確實是一個古老的技巧，但要看到額外的內容對我來說是新事物。

由於我是新來的JavaScript，也許有人知道有這方面的教程或教訓？提前致謝！

來源

2012-02-03 user1016695

看你聯繫，並下載使用的任何額外的JavaScript文件頁面的源代碼;那麼你可以研究它是如何完成的。 – DNA 2012-02-03 13:01:47

隱藏縮略圖的每一行下一個div。更改縮略圖onclick事件處理程序中的內容。當內容發生變化時，請使用jQuerys slidetoggle：http://api.jquery.com/slideToggle/

至少多數民衆贊成我是如何做到這一點。讓我知道如果你要我闡述

一些示例代碼：

$(function(){ 

    $('.thumbnail').click(function(){ 

     var $this = $(this); 
     var $divToShow = $this.nextUntil('div.container'); 
     //fetch the divs content via ajax or however u want to do it here... 
     $divToShow.stop(true, true).slideToggle(); 
    }); 

});

來源

2012-02-03 13:01:20 Johan

我會嘗試http://api.jquery.com/slideDown/爲最基礎的... 之後......它只是一個想象力和良好的口感的搭配:) 有很多jQuery的網站文檔的...... http://docs.jquery.com/UI/Effects/Slide

來源

2012-02-03 13:02:49 frenetix

我想你想知道如何來進行排序，因爲一切是很簡單的:)如果你能告訴我這是如何排序，花樣 - 作品/鏈接，我會給你我最好的解釋其他:)

的更多內容的一部分，可以通過純CSS來實現，而沒有任何的JavaScript。有了這個結構;

<div class="thumb"> 
    <div class="img"></div> 
    <div class="content"></div> 
</div>

and this css present;

.thumb{ 
    display:block; 
    width:100px; 
    height:100px; 
} 
.thumb div{ 
    position:absolute; 
    width:inherit; 
    height:inherit; 
} 
.thumb div.content{ 
    opacity:0; 
} 
.thumb:hover div.content{ 
    opacity:1; 
}

，或者你可以只要鼠標進入聽'onMouseOver'事件。對於加載完整說明的其他部分，請聽'onClick'事件並抓取xhr的信息。

來源

2012-02-03 13:04:50 japrescott

是的，排序的東西很光滑，令人印象深刻 – wheresrhys 2012-02-03 13:31:53

如果你不想使用像jQuery庫，做到這一點是各行根據與溢出隱藏，位置絕對和高度0添加div的，只是擴大他們的onclick最簡單的方法。

來源

2012-02-03 13:05:46 zozo