用html给我写个环形的控制无极灯光的代码,要我我点在环上的不同位置灯光亮度不一样
时间: 2024-03-04 20:49:01 浏览: 21
好的,以下是一个更加复杂的环形控制无极灯光的 HTML 代码示例,其中点击环上的不同位置可以控制无极灯光的亮度:
```html
<!DOCTYPE html>
<html>
<head>
<title>环形控制无极灯光</title>
<style>
.circle {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #ccc;
list-style: none;
padding: 0;
margin: 0 auto;
}
.circle li {
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #fff;
text-align: center;
line-height: 50px;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.circle li:hover {
transform: scale(1.2);
}
.circle li.active {
background-color: #f00;
color: #fff;
}
.light {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #f00;
box-shadow: 0 0 10px #f00;
opacity: 0;
transition: all 0.2s ease-in-out;
}
.light.active {
opacity: 1;
}
</style>
</head>
<body>
<ul class="circle">
<li data-brightness="0.1">1</li>
<li data-brightness="0.2">2</li>
<li data-brightness="0.3">3</li>
<li data-brightness="0.4">4</li>
<li data-brightness="0.5">5</li>
<li data-brightness="0.6">6</li>
<li data-brightness="0.7">7</li>
<li data-brightness="0.8">8</li>
<li data-brightness="0.9">9</li>
<li data-brightness="1.0">10</li>
<li data-brightness="0.9">11</li>
<li data-brightness="0.8">12</li>
</ul>
<div class="light"></div>
<script>
// 获取所有 li 元素和灯光元素
var lis = document.querySelectorAll('.circle li');
var light = document.querySelector('.light');
// 设置初始选中项为第一个
var activeIndex = 0;
lis[activeIndex].classList.add('active');
// 给每个 li 元素绑定点击事件
lis.forEach(function(li, index) {
li.addEventListener('click', function() {
// 移除所有选中状态
lis.forEach(function(li) {
li.classList.remove('active');
});
// 设置当前选中项
activeIndex = index;
li.classList.add('active');
// 获取亮度值并设置灯光亮度
var brightness = parseFloat(li.getAttribute('data-brightness'));
light.style.opacity = brightness;
});
});
// 给整个环形绑定鼠标移动事件
var circle = document.querySelector('.circle');
circle.addEventListener('mousemove', function(e) {
var centerX = circle.offsetWidth / 2;
var centerY = circle.offsetHeight / 2;
var x = e.clientX - circle.offsetLeft - centerX;
var y = -1 * (e.clientY - circle.offsetTop - centerY);
var angle = Math.atan2(y, x) * 180 / Math.PI;
if (angle < 0) {
angle += 360;
}
var index = Math.floor(angle / 30);
if (index != activeIndex) {
// 移除所有选中状态
lis.forEach(function(li) {
li.classList.remove('active');
});
// 设置当前选中项
activeIndex = index;
lis[activeIndex].classList.add('active');
// 获取亮度值并设置灯光亮度
var brightness = parseFloat(lis[activeIndex].getAttribute('data-brightness'));
light.style.opacity = brightness;
}
});
</script>
</body>
</html>
```
这个示例在上一个示例的基础上添加了一个灯光元素和一个鼠标移动事件。当鼠标在环形上移动时,会根据鼠标指向的角度计算出当前选中的项,并根据选中的项设置灯光的亮度。
希望这个更加复杂的示例可以帮助你实现你的需求。如果你有任何问题,请随时问我。
相关推荐
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)