html有四个按钮,第一个按钮默认不旋转,点击之后持续顺时针旋转,其他三个点击之后持续顺时针旋转,切换其他按钮后旋转停止并且位置旋转至原来的位置
时间: 2024-03-18 08:41:23 浏览: 11
好的,这个交互效果可以通过修改上面代码的一些部分来实现。具体来说,需要记录每个按钮的旋转角度,切换按钮时恢复按钮的位置和旋转角度。以下是修改后的代码:
HTML代码:
```html
<button id="btn1" onclick="rotate(1)">Button 1</button>
<button id="btn2" onclick="rotate(2)">Button 2</button>
<button id="btn3" onclick="rotate(3)">Button 3</button>
<button id="btn4" onclick="rotate(4)">Button 4</button>
```
CSS代码:
```css
button {
width: 100px;
height: 50px;
transform-origin: center center;
transition: transform 0.5s linear;
}
```
JavaScript代码:
```javascript
let activeBtn = null; // 当前激活的按钮
const btnInfo = [ // 每个按钮的旋转角度信息
{ index: 1, deg: 0 },
{ index: 2, deg: 0 },
{ index: 3, deg: 0 },
{ index: 4, deg: 0 },
];
function rotate(btnIndex) {
const btn = document.getElementById(`btn${btnIndex}`);
if (activeBtn !== btn) { // 判断点击的按钮是否与当前激活的按钮相同
if (activeBtn) {
clearInterval(activeBtn.intervalId); // 停止旋转
activeBtn.style.transform = `rotate(${activeBtn.deg}deg)`; // 恢复按钮位置和旋转角度
}
activeBtn = btn;
const info = btnInfo.find(item => item.index === btnIndex);
let deg = info.deg; // 取出旋转角度信息
activeBtn.intervalId = setInterval(() => {
deg += 1; // 每次旋转1度
activeBtn.style.transform = `rotate(${deg}deg)`; // 旋转按钮
info.deg = deg; // 更新旋转角度信息
}, 10); // 每隔10毫秒旋转1度
}
}
```
实现效果:点击不同的按钮,按钮会持续顺时针旋转,切换到其他按钮时旋转会停止并且位置旋转至原来的位置。其中第一个按钮默认不旋转,其他三个点击之后持续顺时针旋转。