官方網站& 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 插件已經有504次圍觀