html5悬浮球效果

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

好了，上代码。

这里有四个文件要用：

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

页面使用的js

然后，整个悬浮球就做完了。

想看的同学们可以打开我的网站去看：网址

当然，要记得放到宽度小于500的浏览器中看，我设置了显示的大小。

下面是我在google浏览器中手机界面看到的效果。

 

好了，弄完了，钦此。