Fork me on GitHub

[Jquery]-悬浮按钮弹出组

为了是页面空间得到最大效率的使用,使用悬浮按钮弹出组是一个很不错的选择

image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- 悬浮+按钮 -->
<div class="menu-add">
<i class="iconfont">&#xe6d5;</i>
</div>
<!-- 悬浮返回顶部按钮 -->
<div class="menu-hide menu-back">
<i class="iconfont">&#xe633;</i>
</div>
<!-- 悬浮关注我们按钮 -->
<div class="menu-hide menu-follow">
<i class="iconfont">&#xe612;</i>
</div>
<!-- 悬浮推荐按钮 -->
<div class="menu-hide menu-like">
<i class="iconfont">&#xe67b;</i>
</div>
<!-- 悬浮作品详情按钮 -->
<div class="menu-hide menu-det">
<i class="iconfont">&#xe7a6;</i>
</div>
<!-- 悬浮全屏按钮 -->
<div class="menu-hide menu-full">
<i class="iconfont">&#xe667;</i>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
.menu-add {
width: 60px;
height: 60px;
border-radius: 60px;
background-color: #c4937e;
color: #fff;
position: fixed;
right: 20px;
bottom: 30px;
z-index: 50;
text-align: center;
line-height: 60px;
cursor: pointer;
transition: .3s;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
transform: rotate(0deg);
}

.menu-add.open {
background-color: #ff4c00;
transform: rotate(135deg);
transition: .3s
}

.menu-add i {
font-size: 25px
}

.menu-hide {
width: 50px;
height: 50px;
border-radius: 50px;
background-color: #fff;
color: #fff;
position: fixed;
right: 25px;
bottom: 35px;
z-index: 40;
text-align: center;
line-height: 50px;
cursor: pointer;
transition: .3s;
transform: rotate(0deg);
}

.menu-hide i {
font-size: 25px
}

.menu-back.open {
bottom: 100px;
color: #51c1a8;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.menu-follow.open {
bottom: 165px;
color: #927afa;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.menu-like.open {
bottom: 230px;
color: #e9837b;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.menu-det.open {
bottom: 295px;
color: #42bfe8;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.menu-full.open {
bottom: 360px;
color: #ff9046;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
1
2
3
4
5
6
7
8
9
10
// onAddicon
$('.menu-add').on('click', function() {
if ($(this).hasClass('open')) {
$(this).removeClass('open');
$('.menu-hide').removeClass('open');
} else {
$(this).addClass('open');
$('.menu-hide').addClass('open');
}
});
支持作者