html多功能悬浮球
时间: 2023-11-17 09:04:21 浏览: 46
以下是一个HTML多功能悬浮球的例子,支持定制菜单展开半径、递增角度、起始角度和大小等:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML多功能悬浮球</title>
<style type="text/css">
#menu {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background-color: #f00;
border-radius: 50%;
text-align: center;
line-height: 50px;
color: #fff;
cursor: pointer;
z-index: 9999;
}
#menu:hover {
background-color: #0f0;
}
.sub-menu {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background-color: #00f;
border-radius: 50%;
text-align: center;
line-height: 50px;
color: #fff;
cursor: pointer;
z-index: 9999;
opacity: 0;
transition: all 0.3s ease-in-out;
}
.sub-menu:hover {
background-color: #0ff;
}
.sub-menu:nth-child(1) {
transform: translate(0, -100px);
}
.sub-menu:nth-child(2) {
transform: translate(50px, -87px);
}
.sub-menu:nth-child(3) {
transform: translate(87px, -50px);
}
.sub-menu:nth-child(4) {
transform: translate(100px, 0);
}
.sub-menu:nth-child(5) {
transform: translate(87px, 50px);
}
.sub-menu:nth-child(6) {
transform: translate(50px, 87px);
}
.sub-menu:nth-child(7) {
transform: translate(0, 100px);
}
.sub-menu:nth-child(8) {
transform: translate(-50px, 87px);
}
.sub-menu:nth-child(9) {
transform: translate(-87px, 50px);
}
.sub-menu:nth-child(10) {
transform: translate(-100px, 0);
}
.sub-menu:nth-child(11) {
transform: translate(-87px, -50px);
}
.sub-menu:nth-child(12) {
transform: translate(-50px, -87px);
}
.menu-open .sub-menu {
opacity: 1;
}
</style>
</head>
<body>
<div id="menu" onclick="toggleMenu()">
+
</div>
<div class="sub-menu">
1
</div>
<div class="sub-menu">
2
</div>
<div class="sub-menu">
3
</div>
<div class="sub-menu">
4
</div>
<div class="sub-menu">
5
</div>
<div class="sub-menu">
6
</div>
<div class="sub-menu">
7
</div>
<div class="sub-menu">
8
</div>
<div class="sub-menu">
9
</div>
<div class="sub-menu">
10
</div>
<div class="sub-menu">
11
</div>
<div class="sub-menu">
12
</div>
<script type="text/javascript">
var menuOpen = false;
function toggleMenu() {
if (menuOpen) {
document.getElementById("menu").classList.remove("menu-open");
} else {
document.getElementById("menu").classList.add("menu-open");
}
menuOpen = !menuOpen;
}
</script>
</body>
</html>
```