这个是自己做网站的时候需要做的一个悬浮球效果。分享一下。
自己想做一个自己的网站，觉得自适应的效果会好一点，但是放到手机端的话，菜单显示是个问题。所以自己试着写了一个悬浮球菜单的效果。
好了，上代码。
这里有四个文件要用：
jqurey.js//因为基于jq做的。所以这里要引用js文件。我引用的是jquery-1.8.2.js
PublicJs.js
主要是判断是否是手机端，来确定是使用点击或触摸事件用的
1 var PublicJs = {};
2 PublicJs.IsPhone = function () {//判断是否是手机浏览器
3 try {
4 if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
5 return true;
6 } else {
7 return false;
8 }
9 } catch (e) {
10 return false;
11 }
12 }
13 //鼠标事件
14 PublicJs.Mouse = {
15 Down: (PublicJs.IsPhone() ? "touchstart" : "mousedown"),
16 Move: (PublicJs.IsPhone() ? "touchmove" : "mousemove"),
17 Up: (PublicJs.IsPhone() ? "touchend" : "mouseup"),
18 };
19 //鼠标移动
20 PublicJs.Move = function (e) {
21 var move = { x: 0, y: 0 };
22 var _e = e.touches ? e : window.event;
23 if (PublicJs.IsPhone()) {
24 try {
25 // evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
26 var touch = _e.touches[0]; //获取第一个触点
27 move.x = Number(touch.pageX); //页面触点X坐标
28 move.y = Number(touch.pageY); //页面触点Y坐标
29 } catch (e) {
30 move.x = _e.screenX;
31 move.y = _e.screenY;
32 }
33 }
34 else {
35 move.x = e.screenX;
36 move.y = e.screenY;
37 }
38 return move;
39 };PublicJs.js
SuspendedBall.js
这个是悬浮球的主体方法
1 //悬浮球
2 var SuspendedBall = {
3 ShowWidth: 500,//显示悬浮球的页面宽度
4 //添加悬浮球 参数集合可中包含有 top、left、scc、class四个属性
5 Add: function (obj) {
6 if ($(".SuspendedBall").length == 0) {
7 $("body").append("<div class=\"SuspendedBall\"><div></div></div>")
8 $("body").append("<div class=\"BallBox\"><div class=\"Bg\"></div><div class=\"BallBoxInfo\"></div></div>")
9 }
10 if (obj) {
11 var _this = $(".SuspendedBall");
12 if (typeof (obj.top) != "undefined") {
13 _this.offset({ top: obj.top });
14 }
15 if (typeof (obj.left) != "undefined") {
16 _this.offset({ left: obj.left });
17 }
18 if (typeof (obj.css) != "undefined") {
19 _this.css(obj.css);
20 }
21 if (typeof (obj.class) != "undefined") {
22 _this.addClass(obj.class);
23 }
24 }
25 },
26 //控制悬浮球移动，显示的方法 其中UpFun是指的当触摸或鼠标抬起的时候的执行的方法
27 Move: function (UpFun) {//第一个参数是鼠标抬起的事件触发，第二个参数是创建的时候添加的其他事件
28 var x = 0, y = 0;
29 var sx = 0, sy = 0;
30 var mx = 0, my = 0;
31 var isDown = false;
32 var isMove = false;
33 $(window).resize(function () {
34 if ($(window).width() < SuspendedBall.ShowWidth) {
35 $(".SuspendedBall").show();
36 $(".BallBox").hide();
37 }
38 else {
39 $(".SuspendedBall").hide();
40 $(".BallBox").hide();
41 }
42 })
43 $("body").bind(PublicJs.Mouse.Down, function (e) {
44 if ($(window).width() < SuspendedBall.ShowWidth) {
45 $(".SuspendedBall").show();
46 $(".BallBox").hide();
47 }
48 });
49 $(".BallBox").bind(PublicJs.Mouse.Down, function (e) {
50 if ($(window).width() < SuspendedBall.ShowWidth) {
51 $(".SuspendedBall").show();
52 $(".BallBox").hide();
53 }
54 return false;//取消元素事件向下冒泡
55 });
56 $(".SuspendedBall").bind(PublicJs.Mouse.Down, function (e) {
57 //#region 去除原有的动画样式
58 var right = $(window).width() - $(this).width();
59 var bottom = $(window).height() - $(this).height();
60 if ($(this).hasClass("ToLeft")) {
61 $(this).removeClass("ToLeft").offset({ left: 0 });
62 }
63 else if ($(this).hasClass("ToTop")) {
64 $(this).removeClass("ToTop").offset({ top: 0 });
65 }
66 else if ($(this).hasClass("ToBottom")) {
67 $(this).removeClass("ToBottom").offset({ top: bottom });
68 }
69 else if ($(this).hasClass("ToRight")) {
70 $(this).removeClass("ToRight").offset({ left: right });
71 }
72 //#endregion-----
73 isDown = true;
74 x = $(this).offset().left;
75 y = $(this).offset().top;
76 var move = PublicJs.Move(e);
77 sx = move.x;
78 sy = move.y;
79 return false;//取消元素事件向下冒泡
80 });
81 $(".SuspendedBall").bind(PublicJs.Mouse.Move, function (e) {
82 if (isDown) {
83 var move = PublicJs.Move(e);
84 mx = move.x - sx;//获取鼠标移动了多少
85 my = move.y - sy;//获取鼠标移动了多少
86
87 var movemunber = 5;//当触摸的时候移动像素小于这个值的时候代表着不移动
88 if ((mx) > movemunber || (0 - mx) > movemunber || (my) > movemunber || (0 - my) > movemunber) {
89 isMove = true;
90 }
91 var _top = (y + my), _left = (x + mx);
92 var maxtop = $(window).height()-$(this).height();//获取最小的宽度
93 var maxleft = $(window).width() - $(this).width();//获取最大的宽度
94 _top = _top < 0 ? 0 : (_top > maxtop ? maxtop : _top);//避免小球移除移出去
95 _left = _left > 0 ? _left : 0;//避免小球移除移出去
96 $(this).offset({ top: _top , left: _left });
97 mx = move.x;
98 my = move.y;
99 // isMove = true;
100 }
101 return false;//取消元素事件向下冒泡
102 })
103 $(".SuspendedBall").bind(PublicJs.Mouse.Up, function (e) {
104 var _this = this;
105 ///添加定时器，是因为有的时候move事件还没运行完就运行了这个事件，为了给这个时间添加一个缓冲时间这里定义了10毫秒
106 setTimeout(function () {
107 if (isMove) {//如果移动了执行移动方法
108 var move = { x: $(_this).offset().left, y: $(_this).offset().top };
109 var width = $(window).width() / 2;
110 var height = $(window).height() / 2;
111 var ToLeftOrRight = "left";
112 var ToTopOrBottom = "top";
113 var MoveTo = "x";
114 if (move.x > width) {
115 ToLeftOrRight = "right";
116 move.x = 2 * width - move.x;//左右边距
117 }
118 if (move.y > height) {
119 ToTopOrBottom = "bottom";
120 move.y = 2 * height - move.y;//上下边距
121 }
122 if (move.x > move.y) {
123 MoveTo = "y";
124 }
125
126 $(_this).removeClass("ToLeft").removeClass("ToTop").removeClass("ToBottom").removeClass("ToRight");//去除原样式
127 if (MoveTo == "x") {
128 if (ToLeftOrRight == "left") {
129 $(_this).addClass("ToLeft");
130 }
131 else {
132 $(_this).addClass("ToRight");
133 }
134 }
135 else {
136 if (ToTopOrBottom == "top") {
137 $(_this).addClass("ToTop");
138 }
139 else {
140 $(_this).addClass("ToBottom");
141 }
142 }
143 }
144 else {
145 if (typeof (UpFun) == "function") {
146 UpFun();
147 }
148 $(".SuspendedBall").hide();
149 $(".BallBox").show();
150 }
151 isDown = false;
152 isMove = false;
153 }, 10);
154 return false;//取消元素事件向下冒泡
155 })
156 },
157 //这个方法是显示页面上面的悬浮球方法
158 ShowBall: function () {
159 $(".SuspendedBall").show();
160 $(".BallBox").hide();
161 },
162 //这个方法是显示页面上面的悬浮球菜单的方法
163 ShowBox: function () {
164 $(".SuspendedBall").hide();
165 $(".BallBox").show();
166 },
167 //这个方法是给悬浮球菜单添加内容的方法
168 BoxHtml: function (html) {
169 $(".BallBoxInfo").html(html);
170 },
171 //这个方法是获取到父级页面的悬浮球的方法
172 Partent: function () {
173 if (typeof (window.parent.SuspendedBall) != "undefind") {
174 return window.parent.SuspendedBall;
175 }
176 return null;
177 }
178 };
179 //frame页面点击隐藏顶级父页面悬浮球菜单的方法
180 function FrameBodyClick() {
181 var topWin = (function (p, c) {
182 while (p != c) {
183 c = p
184 p = p.parent
185 }
186 return c
187 })(window.parent, window);
188 $("body").bind(PublicJs.Mouse.Down, function (e) {
189 if (topWin.SuspendedBall) {
190 if ($(window).width() < topWin.SuspendedBall.ShowWidth) {
191 topWin.SuspendedBall.ShowBall();
192 }
193 }
194 });
195 }
196 $(function () {
197 FrameBodyClick();
198 })SuspendedBall.js
SuspendedBall.css
悬浮球的样式
1 .SuspendedBall {
2 position: fixed;
3 width: 50px;
4 height: 50px;
5 background: #3071a9;
6 border-radius: 10px;
7 -moz-border-radius: 10px;
8 -webkit-border-radius: 10px;
9 filter: alpha(opacity=50); /*IE滤镜，透明度50%*/
10 -moz-opacity: 0.5; /*Firefox私有，透明度50%*/
11 opacity: 0.5; /*其他，透明度50%*/
12 z-index: 999; /*最高的层级*/
13 top: 100px;
14 left: 0px;
15 display: none;
16 }
17
18 .SuspendedBall > div {
19 width: 30px;
20 height: 30px;
21 margin: 10px;
22 background: #fff;
23 border-radius: 15px;
24 -moz-border-radius: 15px;
25 -webkit-border-radius: 15px;
26 filter: alpha(opacity=80);
27 -moz-opacity: 0.8;
28 opacity: 0.8;
29 background-image: url("/Images/Self.png");
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("<ul class=\"SMenu\">" + $("#MenuInfo").html() + "</ul>");//添加菜单框的内容当然，具体的样式和里面的内容需要自己去写
4 SuspendedBall.Move();//这个就是让悬浮球动起来的方法。为啥单独写个不写到add方法里面呢？因为你可以在页面中直接写入悬浮球的两个div。这个方法里面可以添加一个参数，这个参数是个function。当鼠标抬起的时候会调用到这个方法。
5 });页面使用的js
然后，整个悬浮球就做完了。
想看的同学们可以打开我的网站去看：网址
当然，要记得放到宽度小于500的浏览器中看，我设置了显示的大小。
下面是我在google浏览器中手机界面看到的效果。
好了，弄完了，钦此。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
