html5悬浮球效果

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

好了，上代码。

这里有四个文件要用：

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

PublicJs.js

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

 var PublicJs = {};
 PublicJs.IsPhone = function () {//判断是否是手机浏览器
     try {
         if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
             return true;
         } else {
             return false;
         }
     } catch (e) {
         return false;
     }
 }
 //鼠标事件
 PublicJs.Mouse = {
     Down: (PublicJs.IsPhone() ? "touchstart" : "mousedown"),
     Move: (PublicJs.IsPhone() ? "touchmove" : "mousemove"),
     Up: (PublicJs.IsPhone() ? "touchend" : "mouseup"),
 };
 //鼠标移动
 PublicJs.Move = function (e) {
     var move = { x: 0, y: 0 };
     var _e = e.touches ? e : window.event;
     if (PublicJs.IsPhone()) {
         try {
             // evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
             var touch = _e.touches[0]; //获取第一个触点
             move.x = Number(touch.pageX); //页面触点X坐标
             move.y = Number(touch.pageY); //页面触点Y坐标
         } catch (e) {
             move.x = _e.screenX;
             move.y = _e.screenY;
         }
     }
     else {
         move.x = e.screenX;
         move.y = e.screenY;
     }
     return move;
 };

PublicJs.js

SuspendedBall.js

这个是悬浮球的主体方法

 //悬浮球
 var SuspendedBall = {
     ShowWidth: 500,//显示悬浮球的页面宽度
     //添加悬浮球 参数集合可中包含有 top、left、scc、class四个属性
     Add: function (obj) {
         if ($(".SuspendedBall").length == 0) {
             $("body").append("<div class=\"SuspendedBall\"><div></div></div>")
             $("body").append("<div class=\"BallBox\"><div class=\"Bg\"></div><div class=\"BallBoxInfo\"></div></div>")
         }
         if (obj) {
             var _this = $(".SuspendedBall");
             if (typeof (obj.top) != "undefined") {
                 _this.offset({ top: obj.top });
             }
             if (typeof (obj.left) != "undefined") {
                 _this.offset({ left: obj.left });
             }
             if (typeof (obj.css) != "undefined") {
                 _this.css(obj.css);
             }
             if (typeof (obj.class) != "undefined") {
                 _this.addClass(obj.class);
             }
         }
     },
     //控制悬浮球移动，显示的方法 其中UpFun是指的当触摸或鼠标抬起的时候的执行的方法
     Move: function (UpFun) {//第一个参数是鼠标抬起的事件触发，第二个参数是创建的时候添加的其他事件
         var x = 0, y = 0;
         var sx = 0, sy = 0;
         var mx = 0, my = 0;
         var isDown = false;
         var isMove = false;
         $(window).resize(function () {
             if ($(window).width() < SuspendedBall.ShowWidth) {
                 $(".SuspendedBall").show();
                 $(".BallBox").hide();
             }
             else {
                 $(".SuspendedBall").hide();
                 $(".BallBox").hide();
             }
         })
         $("body").bind(PublicJs.Mouse.Down, function (e) {
             if ($(window).width() < SuspendedBall.ShowWidth) {
                 $(".SuspendedBall").show();
                 $(".BallBox").hide();
             }
         });
         $(".BallBox").bind(PublicJs.Mouse.Down, function (e) {
             if ($(window).width() < SuspendedBall.ShowWidth) {
                 $(".SuspendedBall").show();
                 $(".BallBox").hide();
             }
             return false;//取消元素事件向下冒泡
         });
         $(".SuspendedBall").bind(PublicJs.Mouse.Down, function (e) {
             //#region 去除原有的动画样式
             var right = $(window).width() - $(this).width();
             var bottom = $(window).height() - $(this).height();
             if ($(this).hasClass("ToLeft")) {
                 $(this).removeClass("ToLeft").offset({ left: 0 });
             }
             else if ($(this).hasClass("ToTop")) {
                 $(this).removeClass("ToTop").offset({ top: 0 });
             }
             else if ($(this).hasClass("ToBottom")) {
                 $(this).removeClass("ToBottom").offset({ top: bottom });
             }
             else if ($(this).hasClass("ToRight")) {
                 $(this).removeClass("ToRight").offset({ left: right });
             }
             //#endregion-----
             isDown = true;
             x = $(this).offset().left;
             y = $(this).offset().top;
             var move = PublicJs.Move(e);
             sx = move.x;
             sy = move.y;
             return false;//取消元素事件向下冒泡
         });
         $(".SuspendedBall").bind(PublicJs.Mouse.Move, function (e) {
             if (isDown) {
                 var move = PublicJs.Move(e);
                 mx = move.x - sx;//获取鼠标移动了多少
                 my = move.y - sy;//获取鼠标移动了多少

                 var movemunber = 5;//当触摸的时候移动像素小于这个值的时候代表着不移动
                 if ((mx) > movemunber || (0 - mx) > movemunber || (my) > movemunber || (0 - my) > movemunber) {
                     isMove = true;
                 }
                 var _top = (y + my), _left = (x + mx);
                 var maxtop = $(window).height()-$(this).height();//获取最小的宽度
                 var maxleft = $(window).width() - $(this).width();//获取最大的宽度
                 _top = _top < 0 ? 0 : (_top > maxtop ? maxtop : _top);//避免小球移除移出去
                 _left = _left > 0 ? _left : 0;//避免小球移除移出去
                 $(this).offset({ top: _top , left: _left });
                 mx = move.x;
                 my = move.y;
                 // isMove = true;
             }
             return false;//取消元素事件向下冒泡
         })
         $(".SuspendedBall").bind(PublicJs.Mouse.Up, function (e) {
             var _this = this;
             ///添加定时器，是因为有的时候move事件还没运行完就运行了这个事件，为了给这个时间添加一个缓冲时间这里定义了10毫秒
             setTimeout(function () {
                 if (isMove) {//如果移动了执行移动方法
                     var move = { x: $(_this).offset().left, y: $(_this).offset().top };
                     var width = $(window).width() / 2;
                     var height = $(window).height() / 2;
                     var ToLeftOrRight = "left";
                     var ToTopOrBottom = "top";
                     var MoveTo = "x";
                     if (move.x > width) {
                         ToLeftOrRight = "right";
                         move.x = 2 * width - move.x;//左右边距
                     }
                     if (move.y > height) {
                         ToTopOrBottom = "bottom";
                         move.y = 2 * height - move.y;//上下边距
                     }
                     if (move.x > move.y) {
                         MoveTo = "y";
                     }

                     $(_this).removeClass("ToLeft").removeClass("ToTop").removeClass("ToBottom").removeClass("ToRight");//去除原样式
                     if (MoveTo == "x") {
                         if (ToLeftOrRight == "left") {
                             $(_this).addClass("ToLeft");
                         }
                         else {
                             $(_this).addClass("ToRight");
                         }
                     }
                     else {
                         if (ToTopOrBottom == "top") {
                             $(_this).addClass("ToTop");
                         }
                         else {
                             $(_this).addClass("ToBottom");
                         }
                     }
                 }
                 else {
                     if (typeof (UpFun) == "function") {
                         UpFun();
                     }
                     $(".SuspendedBall").hide();
                     $(".BallBox").show();
                 }
                 isDown = false;
                 isMove = false;
             }, 10);
             return false;//取消元素事件向下冒泡
         })
     },
     //这个方法是显示页面上面的悬浮球方法
     ShowBall: function () {
         $(".SuspendedBall").show();
         $(".BallBox").hide();
     },
     //这个方法是显示页面上面的悬浮球菜单的方法
     ShowBox: function () {
         $(".SuspendedBall").hide();
         $(".BallBox").show();
     },
     //这个方法是给悬浮球菜单添加内容的方法
     BoxHtml: function (html) {
         $(".BallBoxInfo").html(html);
     },
     //这个方法是获取到父级页面的悬浮球的方法
     Partent: function () {
         if (typeof (window.parent.SuspendedBall) != "undefind") {
             return window.parent.SuspendedBall;
         }
         return null;
     }
 };
 //frame页面点击隐藏顶级父页面悬浮球菜单的方法
 function FrameBodyClick() {
     var topWin = (function (p, c) {
         while (p != c) {
             c = p
             p = p.parent
         }
         return c
     })(window.parent, window);
     $("body").bind(PublicJs.Mouse.Down, function (e) {
         if (topWin.SuspendedBall) {
             if ($(window).width() < topWin.SuspendedBall.ShowWidth) {
                 topWin.SuspendedBall.ShowBall();
             }
         }
     });
 }
 $(function () {
     FrameBodyClick();
 })

SuspendedBall.js

SuspendedBall.css

悬浮球的样式

 .SuspendedBall {
     position: fixed;
     width: 50px;
     height: 50px;
     background: #3071a9;
     border-radius: 10px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     filter: alpha(opacity=50); /*IE滤镜，透明度50%*/
     -moz-opacity: 0.5; /*Firefox私有，透明度50%*/
     opacity: 0.5; /*其他，透明度50%*/
     z-index:; /*最高的层级*/
     top: 100px;
     left: 0px;
     display: none;
 }

     .SuspendedBall > div {
         width: 30px;
         height: 30px;
         margin: 10px;
         background: #fff;
         border-radius: 15px;
         -moz-border-radius: 15px;
         -webkit-border-radius: 15px;
         filter: alpha(opacity=80);
         -moz-opacity: 0.8;
         opacity: 0.8;
         background-image: url("/Images/Self.png");
         background-repeat: no-repeat;
         background-size: 80% auto;
         background-position-x: 50%;
         background-position-y: 50%;
     }

 @media screen and (max-width: 500px) {
     .SuspendedBall {
         display: block;
     }
 }

 @keyframes SuspendedBallToLeft {
     100% {
         left: 0px;
     }
 }

 @-webkit-keyframes SuspendedBallToLeft {
     100% {
         left: 0px;
     }
 }

 @-moz-keyframes SuspendedBallToLeft {
     100% {
         left: 0px;
     }
 }

 .ToLeft {
     animation: SuspendedBallToLeft 1s normal;
     -moz-animation: SuspendedBallToLeft 1s normal; /* Firefox */
     -webkit-animation: SuspendedBallToLeft 1s normal; /* Safari 和 Chrome */
     animation-iteration-count:;
     -moz-animation-iteration-count:; /* Safari 和 Chrome */
     -webkit-animation-iteration-count:; /* Safari 和 Chrome */
     animation-fill-mode: forwards;
     -moz-animation-fill-mode: forwards;
     -webkit-animation-fill-mode: forwards;
 }

 @keyframes SuspendedBallToTop {
     100% {
         top: 0px;
     }
 }

 @-webkit-keyframes SuspendedBallToTop {
     100% {
         top: 0px;
     }
 }

 @-moz-keyframes SuspendedBallToTop {
     100% {
         top: 0px;
     }
 }

 .ToTop {
     animation: SuspendedBallToTop 1s normal;
     -moz-animation: SuspendedBallToTop 1s normal; /* Firefox */
     -webkit-animation: SuspendedBallToTop 1s normal; /* Safari 和 Chrome */
     animation-iteration-count:;
     -moz-animation-iteration-count:; /* Safari 和 Chrome */
     -webkit-animation-iteration-count:; /* Safari 和 Chrome */
     animation-fill-mode: forwards;
     -moz-animation-fill-mode: forwards;
     -webkit-animation-fill-mode: forwards;
 }

 @keyframes SuspendedBallToBottom {
     100% {
         top: calc(100% - 50px);
         top: -webkit-calc(100% - 50px);
         top: -moz-calc(100% - 50px);
     }
 }

 @-webkit-keyframes SuspendedBallToBottom {
     100% {
         top: calc(100% - 50px);
         top: -webkit-calc(100% - 50px);
         top: -moz-calc(100% - 50px);
     }
 }

 @-moz-keyframes SuspendedBallToBottom {
     100% {
         top: calc(100% - 50px);
         top: -webkit-calc(100% - 50px);
         top: -moz-calc(100% - 50px);
     }
 }

 .ToBottom {
     animation: SuspendedBallToBottom 1s normal;
     -moz-animation: SuspendedBallToBottom 1s normal; /* Firefox */
     -webkit-animation: SuspendedBallToBottom 1s normal; /* Safari 和 Chrome */
     animation-iteration-count:;
     -moz-animation-iteration-count:; /* Safari 和 Chrome */
     -webkit-animation-iteration-count:; /* Safari 和 Chrome */
     animation-fill-mode: forwards;
     -moz-animation-fill-mode: forwards;
     -webkit-animation-fill-mode: forwards;
 }

 @keyframes SuspendedBallToRight {
     100% {
         left: calc(100% - 50px);
         left: -webkit-calc(100% - 50px);
         left: -moz-calc(100% - 50px);
     }
 }

 @-webkit-keyframes SuspendedBallToRight {
     100% {
         left: calc(100% - 50px);
         left: -webkit-calc(100% - 50px);
         left: -moz-calc(100% - 50px);
     }
 }

 @-moz-keyframes SuspendedBallToRight {
     100% {
         left: calc(100% - 50px);
         left: -webkit-calc(100% - 50px);
         left: -moz-calc(100% - 50px);
     }
 }

 .ToRight {
     animation: SuspendedBallToRight 0.5s normal;
     -moz-animation: SuspendedBallToRight 0.5s normal; /* Firefox */
     -webkit-animation: SuspendedBallToRight 0.5s normal; /* Safari 和 Chrome */
     animation-iteration-count:;
     -moz-animation-iteration-count:; /* Safari 和 Chrome */
     -webkit-animation-iteration-count:; /* Safari 和 Chrome */
     animation-fill-mode: forwards;
     -moz-animation-fill-mode: forwards;
     -webkit-animation-fill-mode: forwards;
 }

 .BallBox {
     position: fixed;
     z-index:;
     top: calc(50% - 160px);
     left: calc(50% - 160px);
     display: block;
     width: 300px;
     border: 1px solid #808080;
     border-radius: 10px;
     height: 300px;
     padding: 10px;
     display: none;
 }

     .BallBox > .Bg {
         position: absolute;
         z-index:;
         width: 300px;
         height: 300px;
         background-color: #ededed;
         background-image: url("/Images/Self.png");
         background-repeat: no-repeat;
         background-size: 50% auto;
         background-position: 50% 50%;
         filter: alpha(opacity=30);
         -moz-opacity: 0.3;
         opacity: 0.3;
     }

     .BallBox > .BallBoxInfo {
         position: absolute;
         z-index:;
         width: 300px;
         height: 300px;
         overflow: auto;
     }

SuspendedBall.css

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

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

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

页面使用的js

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

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

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

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

好了，弄完了，钦此。