官方網站& demo：http://zurb.com/playground/twentytwenty 運行必備：jquery、jquery.event.move（一個用於在移動設備上支持觸摸事件的類） 瀏覽器兼容：IE9 + ，其他現代瀏覽器
TwentyTwenty的工作原理是在彼此的頂部堆疊的兩個圖像。當滑塊在整個圖像移動，它使CSS的使用剪輯屬性來裁剪圖像左側,這允許在右側的圖像通過容器來顯示。
我們正在使用的自定義運動事件jquery.event.move庫，以支持在移動設備上1:1滑塊運動。
TwentyTwenty非常容易上手，只是包裝容器內的兩個圖像。所述第一圖像將在左側，第二個將在右邊。下面是一個容器例子：
<div id="container1"> <img src="sample-before.png"> <img src="sample-after.png"> </div> |
|---|
然後調用twentytwenty()這個容器載入圖像：
$(window).load(function() { $("#container1").twentytwenty(); }); |
|---|
這裡有個在TwentyTwenty 基礎上開發的WordPress 插件，通過短代碼 [TwentyTwenty][/TwentyTwenty] 就可以直接在後台的編輯器中使用。
下載地址：http://wordpress.org/plugins/twentytwenty/
[admin ] TwentyTwenty：一個圖片特效Jquery 插件已經有503次圍觀
