超酷的JavaScript 图像液态效果

Andrea Giammarchi对旧的ActionScript 1.0的图片效果进行了改良，使其更轻量，1.2Kb，更便携，跨浏览器，zero libraries 依赖，100%纯JavaScript，不使用canvas。

 

 
这个原理很简单：使用一个div的图像作为背景，然后朝着相反的方向伸展，也许还要对一些像素进行调整，以便找到扩张背景的最后一部分与移动的图片之间的匹配点。

用法更简单：配置对象使用一个Liquid函数

var fx = Liquid({ // image src, every supported format src:"myimage.png", // element to use as Liquid container target: document.getElementById("fx") // or $("#fx")[0] for some guy, // optional direction, left by default // accepted: left, right, bottom, top direction: "left", // optional scale factor, 2000% by default // it is how much the image should be stretched scale: 2000, // optional speed, 1 to whatever, by default 10 speed: 10, // optional callback, will be executed at the end callback:function(){alert("it's Liquid!")}, // optional onload to perform some operation // after the image has been loaded onload:function(){/*FX not started yet*/}, // optional reverse property // performed only over a precedent liquid FX reverse:true }); // fx variable will have two methods // fx.pause() // to stop the animation // fx.play() // to re-enable it after a pause // these two effects are available only // during animation time, removed // before optional callback call

查看源代码： http://www.devpro.it/code/200.html

有两个相当酷的演示：
Demo1-Firefox Logo 
Demo2 -VAIO Logo