小圆圈在右上角哦
html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
- <title > 可拖动悬浮按钮 </title>
- </head>
- <body>
- <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function () {
- var suspBtn = $("<div > 返回 </div>");
- $("body").append(suspBtn);
- suspBtn.CSS({
- "position": "fixed",
- "z-index": 998,
- "top": "20px",
- "right": "10px",
- "width": "50px",
- "height": "50px",
- "line-height": "50px",
- "border-radius": "50%",
- "background": "rgba(0,195,171,1)",
- "box-shadow": "0 0 0.1rem rgba(0,0,0,.5)",
- "color": "#fff",
- "text-align": "center",
- "box-sizing": "border-box",
- "font-size": "14px",
- "cursor": "pointer"
- });
- var mousex = 0,
- mousey = 0;
- var divLeft, divTop;
- var flag = false;
- var moveNum = 0;
- var left = suspBtn.css('left');
- var top = suspBtn.css('top');
- var maxWidth = $(window).width();
- var maxHeight = $(window).height();
- var divWidth = suspBtn.outerWidth();
- suspBtn.bind('touchstart mousedown', function (e) {
- moveNum = 0;
- flag = true;
- console.log(flag)
- console.log("start")
- var offset = $(this).offset();
- divLeft = parseInt(offset.left, 10);
- divTop = parseInt(offset.top, 10);
- var touch;
- if(event.touches){
- touch = event.touches[0];
- }else {
- touch = event;
- }
- mousey = touch.pageY;
- mousex = touch.pageX;
- });
- $(document).bind('touchmove mousemove', function (e) {
- if(flag){
- moveNum++;
- console.log("move");
- var divHeight = suspBtn.outerHeight();
- window.event.preventDefault(); // 阻止页面的滑动默认事件
- var touch;
- if(event.touches){
- touch = event.touches[0];
- }else {
- touch = event;
- }
- left = divLeft + (touch.clientX - mousex);
- top = divTop + (touch.clientY - mousey);
- top = top <0 ? 0 : top;
- left = left < 0 ? 0 : left;
- top = top> (maxHeight - divHeight) ? maxHeight - divHeight : top;
- left = left> (maxWidth - divWidth) ? maxWidth - divWidth : left;
- suspBtn.css({
- 'top': top + 'px',
- 'left': left + 'px'
- });
- return false;
- }
- });
- suspBtn.bind('touchend mouseup', function () {
- console.log("end");
- var divHeight = suspBtn.outerHeight();
- var right = maxWidth - left - divWidth;
- var bottom = maxHeight - top - divHeight;
- var arr = [];
- arr.push(top);
- arr.push(left);
- arr.push(right);
- arr.push(bottom);
- var minDis = arr[0];
- var minSign;
- $.each(arr, function (i, v) {
- if (v <= minDis) {
- minDis = v;
- minSign = i;
- }
- });
- if (minSign == 0) {
- top = 3;
- } else if (minSign != undefined) {
- left = maxWidth - divWidth;
- }
- suspBtn.animate({
- 'top': top + 'px',
- 'left': left + 'px'
- }, 500,function(){
- left = suspBtn.css('left');
- top = suspBtn.css('top');
- });
- suspBtn.unbind('touchstart');
- });
- suspBtn.click(function () {
- flag = false;
- if(moveNum<2){
- window.location.href = "https://www.baidu.com";
- }
- });
- });
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/44817/8c29314b2bbbd74615571cefad1bd83e.html