html5懸浮球效果

時間 2019-11-12

標籤 html5 html 懸浮效果欄目 HTML5 简体版

原文原文鏈接

本身想作一個本身的網站，以爲自適應的效果會好一點，可是放到手機端的話，菜單顯示是個問題。因此本身試着寫了一個懸浮球菜單的效果。css

好了，上代碼。html

這裏有四個文件要用：jquery

jqurey.js//由於基於jq作的。因此這裏要引用js文件。我引用的是jquery-1.8.2.jsweb

PublicJs.js瀏覽器

主要是判斷是不是手機端，來肯定是使用點擊或觸摸事件用的app

 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.jside

這個是懸浮球的主體方法動畫

  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網站

懸浮球的樣式this

  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 });