gpt4 book ai didi

Javascript 旋转动画

转载 作者:行者123 更新时间:2023-11-30 05:47:47 25 4
gpt4 key购买 nike

我被困在一个点上。有 10 条直线(png 图像)。我想要的是在第一条线旋转 40 度后,第二条线应该开始旋转,然后是第三条、第四条、第五条和等等!!!

代码:

<div class="hair" onclick="rotate()">
<img src="single.png" id="1" width="10" height="40">
<img src="single.png" id="2" width="10" height="40">
<img src="single.png" id="3" width="10" height="40">
<img src="single.png" id="4" width="10" height="40">
<img src="single.png" id="5" width="10" height="40">
<img src="single.png" id="6" width="10" height="40">
<img src="single.png" id="7" width="10" height="40">
<img src="single.png" id="8" width="10" height="40">
<img src="single.png" id="9" width="10" height="40">
<img src="single.png" id="10" width="10" height="40">
</div>

Javascript:

function rotate(){
for(var i=1;i<11;i++)
{
setInterval(function(){
document.getElementById(i).style.WebkitTransitionDuration="1s";
document.getElementById(i).style.webkitTransform = 'rotate(40deg)';
},100)
}
}

最佳答案

有几个步骤可以解决您的问题:

HTML 中的 ID 不能以数字开头,因此将它们重命名为“hair1”、“hai​​r2”等。

主要问题是,由于 setInterval,当函数运行时,i 将不是您期望的 i。这是因为可变范围。您可以使用匿名函数来解决这个问题。

结合以上两者得到以下代码:

<div class="hair" onclick="rotate()">
<img src="single.png" id="hair1" width="10" height="40">
<img src="single.png" id="hair2" width="10" height="40">
<!-- etc -->
</div>

// NOTE: This is not the final code listing, see below for a final answer.
for (var i = i; i < 11; i++) {
(function(local_i) {
setInterval(function () {
// use local_i instead of i inside this function for the results you expect
document.getElementById('hair' + local_i).style.WebkitTransitionDuration='1s';
document.getElementById('hair' + local_i).style.webkitTransform = 'rotate(40deg)';
}, 100);
})(i);
}

我还建议将样式放入样式表中,然后使用类应用它们:

.rotate
{
-webkit-transform: rotate(40deg);
-webkit-transition: -webkit-transform 1s;
}

最后,要让元素连续旋转而不是一起旋转,您需要将间隔乘以 i 的值。我认为您可能是想使用 setTimeout 而不是 setInterval(setInterval 会一遍又一遍地运行)。

function rotate(){
for(var i=1;i<11;i++) {
(function (local_i) {
setTimeout(function(){
document.getElementById('hair' + local_i).classList.add('rotate');
}, 100 * local_i);
})(i);
}
}

我整理了一个 demo here

关于Javascript 旋转动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16893844/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com