索尼动画效果
转自：http://bbs.blueidea.com/thread-2950761-1-1.html
模拟Flash效果：
水平：
Code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> code.js.cn </title>
<base href="http://www.3site.eu/examples/liquid/" />
<style>
html,body{margin:0;background:#000;}
#ldh_win{position:relative;width:332px;height:200px; margin:0 auto;overflow:hidden; }
#up{ background:url(vaio.png) no-repeat 100% 0; position:absolute;right:0;height:200px;}
img{position:absolute;right:0;border:none}
</style>
</head>
<body>
<div id="ldh_win">
<img src="vaio.png" width="3320" height="200" id="fb" onload="fx(0)">
<div id="up"></div>
</div>
</body>
<script>
function fx(i){
var up=document.getElementById("up").style,fb=document.getElementById("fb").style;
setInterval(function(){i+=5;up.width=i+'px';fb.right=-i*9+'px';},15);
}
</script>
</html>
垂直：
Code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> code.js.cn </title>
<base href="http://www.3site.eu/examples/liquid/" />
<style>
html,body{margin:0;background:#000;}
#ldh_win{position:relative;width:332px;height:200px; margin:0 auto;overflow:hidden; }
#up{ background:url(vaio.png) no-repeat 0 100% ;position:absolute;bottom:0;width:332px;height:0}
img{position:absolute;bottom:0;border:none}
</style>
</head>
<body>
<div id="ldh_win">
<img src="vaio.png" width="332" height="2000" id="fb" onload="fx(0)">
<div id="up"></div>
</div>
</body>
<script>
function fx(i){
var up=document.getElementById("up").style,fb=document.getElementById("fb").style;
setInterval(function(){i++;up.height=i+'px';fb.bottom=-i*9+'px';},15);
}
</script>
</html>
原理：两个相同的图片，一个拉伸图片，一个渐露图片。
