[英]Basic JavaScript Animation
在浏览了JavaScript动画教程并查看了流程帖子中的其他堆栈之后。 我想知道为什么我自己尝试实现此示例时不起作用。 即使逐字复制动画也不起作用。 这是我根据给出的示例代码创建的版本。 我很清楚其他可用的示例包含了更多的代码,但是这个人似乎使用的更少,并获得相同的结果并将其作为工作代码进行广告。 我也知道CSS3以及它使用起来有多容易,我很好奇为什么它不起作用。 谢谢阅读。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Animation</title>
<style type="text/css">
.area {
width: 300px;
height: 300px;
border-style: solid;
border-width: 1px;
}
.block {
width: 25px;
height: 25px;
background: #999;
}
</style>
<script>
function move(elem) {
var left = 0;
function frame() {
left++; //update parameters
elem.style.left = left + 'px'; //show frame
if(left==100)
clearInterval(id);
}
var id = setInterval(frame, 10); //draw every 10ms
}
</script>
</head>
<body>
<div onclick="move(this.children[0])" class="area">
<div class="block"></div>
</div>
</body>
</html>
您需要相对或绝对定位block元素,以使left属性起作用:
.block {
position: relative;
width: 25px;
height: 25px;
background: #999;
}
当position属性不是静态值(默认值)时, left
的属性将处于活动状态。 切换到相对位置,或使用margin-left而不是left。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.