超酷的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