横向动画效果
[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>javascript模仿flash的动画效果 </title>
<base href="http://www.aspprogram.cn/test/" />
<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]
纵向动画效果
[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> javascript模仿flash的动画效果 </title>
<base href="http://www.aspprogram.cn/test/" />
<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>
[/code]
- 教程
- 软件
- 源码
javascript模仿flash的动画效果
2009-10-10 07:52:28 来源： 作者：佚名 浏览量:1744 收藏
上一篇： 网页上从右边缓缓弹出的广告框效果
热门教程
Copyright(C)2013-2017版权所属asp编程网