4.制作一个页面,页面上有五幅图像,图像等分在一个圆上,当用户点击页面时,图象逆时钟移动。
时间: 2024-03-17 11:45:10 浏览: 22
好的,这个问题需要编写一些JavaScript代码来实现。首先,我们需要将五幅图像等分在一个圆上。具体的实现方法是,使用CSS设置每张图片的定位,使其围绕圆心旋转。然后,我们需要编写JavaScript代码来监听页面的点击事件,并且在每次点击时旋转图像。
以下是实现这个功能的代码:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>旋转图像</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
position: relative;
width: 500px;
height: 500px;
}
.image {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
.image1 {
transform: rotate(0deg) translate(250px) rotate(0deg);
}
.image2 {
transform: rotate(72deg) translate(250px) rotate(-72deg);
}
.image3 {
transform: rotate(144deg) translate(250px) rotate(-144deg);
}
.image4 {
transform: rotate(216deg) translate(250px) rotate(-216deg);
}
.image5 {
transform: rotate(288deg) translate(250px) rotate(-288deg);
}
</style>
</head>
<body>
<div class="container">
<img class="image image1" src="image1.jpg" alt="image1" />
<img class="image image2" src="image2.jpg" alt="image2" />
<img class="image image3" src="image3.jpg" alt="image3" />
<img class="image image4" src="image4.jpg" alt="image4" />
<img class="image image5" src="image5.jpg" alt="image5" />
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
在CSS代码中,我们设置了每张图片的位置,并且使用了`transform`属性来围绕圆心旋转。
JavaScript代码:
```js
const images = document.querySelectorAll('.image');
let angle = 0;
document.addEventListener('click', () => {
angle += 72;
images.forEach((image, index) => {
const rotate = angle + index * 72;
image.style.transform = `rotate(${rotate}deg) translate(250px) rotate(${-rotate}deg)`;
});
});
```
在JavaScript代码中,我们首先获取了所有的图片元素,并且定义了一个变量`angle`来记录当前的旋转角度。然后,我们给整个页面添加了一个点击事件的监听器。在每次点击时,我们增加旋转角度`angle`的值,并且使用`forEach()`方法遍历每个图片元素,计算它的旋转角度,最后使用`style.transform`属性来更新每个图片的位置。
希望这个代码能够帮助到你完成这个项目,如果还有什么问题请随时问我。