您的位置：首页 > Web前端 > JavaScript

javascript简单的动画效果

2009-07-28 08:32 330 查看

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<mce:style><!--
.box{border:#C90 1px solid;width:200px;height:20px; margin:0 auto; position:relative;}
.movebox{width:20px;height:20px; background:#9C0; overflow:hidden; position:absolute;left:0}
--></mce:style><style mce_bogus="1">.box{border:#C90 1px solid;width:200px;height:20px; margin:0 auto; position:relative;}
.movebox{width:20px;height:20px; background:#9C0; overflow:hidden; position:absolute;left:0}</style>
</head>

<body onload="moves()">
<div class="box" id="box">
<div class="movebox" id="movebox"></div>
</div>

<mce:script type="text/javascript"><!--
var $ = function(id){ return document.getElementById(id)}
$("movebox").style.position = 'absolute';
$("movebox").style.left = 0;
function moves(){
var ypos = parseInt($("movebox").style.left) ;
if(ypos < 180){

ypos++;
}
$("movebox").style.left = ypos + 'px';
setTimeout(moves,10);

}
// --></mce:script>
</body>
</html>

代码写的不好,有看的朋友欢迎指出问题,谢谢

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航