当前位置: 开发笔记 > 编程语言 > 正文

html5悬浮球效果

作者：秋林学士_809 | 来源：互联网 | 2023-07-23 12:47

自己想做一个自己的网站，觉得自适应的效果会好一点，但是放到手机端的话，菜单显示是个问题。所以自己试着写了一个悬浮球菜单的效果。好了，上代码。这里有四个文件要用：jqurey.js因为基于jq

自己想做一个自己的网站，觉得自适应的效果会好一点，但是放到手机端的话，菜单显示是个问题。所以自己试着写了一个悬浮球菜单的效果。

好了，上代码。

这里有四个文件要用：

jqurey.js//因为基于jq做的。所以这里要引用js文件。我引用的是jquery-1.8.2.js

PublicJs.js

主要是判断是否是手机端，来确定是使用点击或触摸事件用的

;
30 background-repeat: no-repeat;
31 background-size: 80% auto;
32 background-position-x: 50%;
33 background-position-y: 50%;
34 }
35
36 @media screen and (max-width: 500px) {
37 .SuspendedBall {
38 display: block;
39 }
40 }
41
42
43 @keyframes SuspendedBallToLeft {
44 100% {
45 left: 0px;
46 }
47 }
48
49 @-webkit-keyframes SuspendedBallToLeft {
50 100% {
51 left: 0px;
52 }
53 }
54
55 @-moz-keyframes SuspendedBallToLeft {
56 100% {
57 left: 0px;
58 }
59 }
60
61
62 .ToLeft {
63 animation: SuspendedBallToLeft 1s normal;
64 -moz-animation: SuspendedBallToLeft 1s normal; /* Firefox */
65 -webkit-animation: SuspendedBallToLeft 1s normal; /* Safari 和 Chrome */
66 animation-iteration-count: 1;
67 -moz-animation-iteration-count: 1; /* Safari 和 Chrome */
68 -webkit-animation-iteration-count: 1; /* Safari 和 Chrome */
69 animation-fill-mode: forwards;
70 -moz-animation-fill-mode: forwards;
71 -webkit-animation-fill-mode: forwards;
72 }
73
74 @keyframes SuspendedBallToTop {
75 100% {
76 top: 0px;
77 }
78 }
79
80 @-webkit-keyframes SuspendedBallToTop {
81 100% {
82 top: 0px;
83 }
84 }
85
86 @-moz-keyframes SuspendedBallToTop {
87 100% {
88 top: 0px;
89 }
90 }
91
92
93 .ToTop {
94 animation: SuspendedBallToTop 1s normal;
95 -moz-animation: SuspendedBallToTop 1s normal; /* Firefox */
96 -webkit-animation: SuspendedBallToTop 1s normal; /* Safari 和 Chrome */
97 animation-iteration-count: 1;
98 -moz-animation-iteration-count: 1; /* Safari 和 Chrome */
99 -webkit-animation-iteration-count: 1; /* Safari 和 Chrome */
100 animation-fill-mode: forwards;
101 -moz-animation-fill-mode: forwards;
102 -webkit-animation-fill-mode: forwards;
103 }
104
105 @keyframes SuspendedBallToBottom {
106 100% {
107 top: calc(100% - 50px);
108 top: -webkit-calc(100% - 50px);
109 top: -moz-calc(100% - 50px);
110 }
111 }
112
113 @-webkit-keyframes SuspendedBallToBottom {
114 100% {
115 top: calc(100% - 50px);
116 top: -webkit-calc(100% - 50px);
117 top: -moz-calc(100% - 50px);
118 }
119 }
120
121 @-moz-keyframes SuspendedBallToBottom {
122 100% {
123 top: calc(100% - 50px);
124 top: -webkit-calc(100% - 50px);
125 top: -moz-calc(100% - 50px);
126 }
127 }
128
129 .ToBottom {
130 animation: SuspendedBallToBottom 1s normal;
131 -moz-animation: SuspendedBallToBottom 1s normal; /* Firefox */
132 -webkit-animation: SuspendedBallToBottom 1s normal; /* Safari 和 Chrome */
133 animation-iteration-count: 1;
134 -moz-animation-iteration-count: 1; /* Safari 和 Chrome */
135 -webkit-animation-iteration-count: 1; /* Safari 和 Chrome */
136 animation-fill-mode: forwards;
137 -moz-animation-fill-mode: forwards;
138 -webkit-animation-fill-mode: forwards;
139 }
140
141 @keyframes SuspendedBallToRight {
142 100% {
143 left: calc(100% - 50px);
144 left: -webkit-calc(100% - 50px);
145 left: -moz-calc(100% - 50px);
146 }
147 }
148
149 @-webkit-keyframes SuspendedBallToRight {
150 100% {
151 left: calc(100% - 50px);
152 left: -webkit-calc(100% - 50px);
153 left: -moz-calc(100% - 50px);
154 }
155 }
156
157 @-moz-keyframes SuspendedBallToRight {
158 100% {
159 left: calc(100% - 50px);
160 left: -webkit-calc(100% - 50px);
161 left: -moz-calc(100% - 50px);
162 }
163 }
164
165 .ToRight {
166 animation: SuspendedBallToRight 0.5s normal;
167 -moz-animation: SuspendedBallToRight 0.5s normal; /* Firefox */
168 -webkit-animation: SuspendedBallToRight 0.5s normal; /* Safari 和 Chrome */
169 animation-iteration-count: 1;
170 -moz-animation-iteration-count: 1; /* Safari 和 Chrome */
171 -webkit-animation-iteration-count: 1; /* Safari 和 Chrome */
172 animation-fill-mode: forwards;
173 -moz-animation-fill-mode: forwards;
174 -webkit-animation-fill-mode: forwards;
175 }
176
177
178
179 .BallBox {
180 position: fixed;
181 z-index: 999;
182 top: calc(50% - 160px);
183 left: calc(50% - 160px);
184 display: block;
185 width: 300px;
186 border: 1px solid #808080;
187 border-radius: 10px;
188 height: 300px;
189 padding: 10px;
190 display: none;
191 }
192
193 .BallBox > .Bg {
194 position: absolute;
195 z-index: 998;
196 width: 300px;
197 height: 300px;
198 background-color: #ededed;
199 background-image: url("/Images/Self.png");
200 background-repeat: no-repeat;
201 background-size: 50% auto;
202 background-position: 50% 50%;
203 filter: alpha(opacity=30);
204 -moz-opacity: 0.3;
205 opacity: 0.3;
206 }
207
208 .BallBox > .BallBoxInfo {
209 position: absolute;
210 z-index: 999;
211 width: 300px;
212 height: 300px;
213 overflow: auto;
214 }

SuspendedBall.css

还有要注意的是，你的body是否足够高。因为隐藏悬浮菜单的事件实在body上面触发的。我的页面中设置了html{width:100%;height:100%;}body{width:100%;height:100%}这两个样式。来解决这个问题，同事也解决了苹果手机里面的position:fixed;失效的问题

然后下面是我们使用这个悬浮球的时候的代码了

1 $(function () {
2     SuspendedBall.Add();//添加悬浮球
3     SuspendedBall.BoxHtml("" + $("#MenuInfo").html() + "
");//添加菜单框的内容当然，具体的样式和里面的内容需要自己去写
4     SuspendedBall.Move();//这个就是让悬浮球动起来的方法。为啥单独写个不写到add方法里面呢？因为你可以在页面中直接写入悬浮球的两个div。这个方法里面可以添加一个参数，这个参数是个function。当鼠标抬起的时候会调用到这个方法。
5 });