自己想做一个自己的网站，觉得自适应的效果会好一点，但是放到手机端的话，菜单显示是个问题。所以自己试着写了一个悬浮球菜单的效果。
好了，上代码。
这里有四个文件要用：
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 };
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.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- 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 }
还有要注意的是，你的body是否足够高。因为隐藏悬浮菜单的事件实在body上面触发的。我的页面中设置了html{100%;height:100%;}body{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 });
然后，整个悬浮球就做完了。
想看的同学们可以打开我的网站去看：网址
当然，要记得放到宽度小于500的浏览器中看，我设置了显示的大小。
下面是我在google浏览器中手机界面看到的效果。
好了，弄完了，钦此。