我尝试使用setInterval和向左更改style属性的函数来创建猫走路的动画。但是,这不起作用。没有动画。而且我已经正确地完成了所有操作,所以我不知道为什么它不起作用。
<html>
<head>
<meta charset="utf-8">
<title>Challenge: Catwalk</title>
<style>
#cat {
position: absolute;
left: 0px;
}
</style>
</head>
<body>
<div>
<!-- Cat walking GIF from: http://www.anniemation.com/clip_art/graphics.html -->
<img id="cat" src="https://www.kasandbox.org/programming-images/misc/cat-walk.gif">
</div>
<script>
var catEl = document.getElementById("cat");
function walkTheCat(){
catEl.style.left=parseFloat(catEl.style.left)+40+"px"
};
setInterval(walkTheCat,1000)
</script>
</body>
</html>```
答案 0 :(得分:2)
最简单的解决方案是使用计数器。 left = left + 40
,这将确保猫在整个屏幕上动起来。
var left = 0;
function walkTheCat() {
catEl.style.left = left;
left = left + 40;
};
setInterval(walkTheCat, 1000)
我录制了一个截屏视频,向您展示了如何解决此问题。您可以找到一个highlight of the solution here。
catEl.style.left
不提供css属性。再见try to log it here。
您可以通过检测图像何时破裂window.innerWidth
来使猫成环。见我的looping cat here。
答案 1 :(得分:0)
由CSS设置的样式不会出现在元素的style属性中。要使其起作用,请将其更改为对left
使用内联样式,或者对getComputedStyle
使用。我个人认为使用内联样式更简单:
<html>
<head>
<meta charset="utf-8">
<title>Challenge: Catwalk</title>
</head>
<body>
<div>
<!-- Cat walking GIF from: http://www.anniemation.com/clip_art/graphics.html -->
<img id="cat" style="left:0px" src="https://www.kasandbox.org/programming-images/misc/cat-walk.gif">
</div>
....