自己想做一个自己的网站，觉得自适应的效果会好一点，但是放到手机端的话，菜单显示是个问题。所以自己试着写了一个悬浮球菜单的效果。
好了，上代码。
这里有四个文件要用：
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浏览器中手机界面看到的效果。
好了，弄完了，钦此。