制作一个页面,页面上有五幅图像,图像等分在一个圆上,当用户点击页面时,图象逆时钟移动。
时间: 2024-03-24 14:35:59 浏览: 14
好的,这是一个比较有趣的问题。实现这个功能需要用到 HTML、CSS 和 JavaScript。以下是一个简单的实现过程:
HTML 代码:
```html
<div class="circle">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
<div class="item item5"></div>
</div>
```
CSS 代码:
```css
.circle {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border-radius: 50%;
background-color: #f2f2f2;
}
.item {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
border-radius: 50%;
background-color: #333;
cursor: pointer;
transition: transform 0.5s ease-in-out;
}
.item:hover {
transform: scale(1.2);
}
.item1 {
transform: rotate(0deg) translate(150px) rotate(-0deg);
}
.item2 {
transform: rotate(72deg) translate(150px) rotate(-72deg);
}
.item3 {
transform: rotate(144deg) translate(150px) rotate(-144deg);
}
.item4 {
transform: rotate(216deg) translate(150px) rotate(-216deg);
}
.item5 {
transform: rotate(288deg) translate(150px) rotate(-288deg);
}
```
JavaScript 代码:
```javascript
const items = document.querySelectorAll('.item');
function rotateItems() {
const firstItem = document.querySelector('.item1');
const firstItemStyle = window.getComputedStyle(firstItem);
const transform = firstItemStyle.getPropertyValue('transform');
const values = transform.split('(')[1].split(')')[0].split(',');
const angle = Math.round(Math.atan2(values[1], values[0]) * (180 / Math.PI));
const newAngle = angle + 72;
items.forEach((item, index) => {
const currentAngle = (angle + (72 * index)) % 360;
item.style.transform = `rotate(${currentAngle}deg) translate(150px) rotate(-${currentAngle}deg)`;
});
firstItem.style.transform = `rotate(${newAngle}deg) translate(150px) rotate(-${newAngle}deg)`;
}
document.addEventListener('click', rotateItems);
```
这段代码会在页面上创建一个圆形容器,然后在圆上等分五个 div 元素,每个 div 元素代表一个图像。当用户点击页面时,JavaScript 代码会计算当前第一个 div 元素的角度,然后将所有图像逆时钟移动 72 度。同时,第一个 div 元素会向左移动 72 度,以保持圆形布局。
注意,这个实现方式不是很完美,因为当用户点击过快时,动画会出现卡顿。如果需要更好的性能和更流畅的动画,可以考虑使用 Canvas 或 SVG 实现。