https://jsrqqzl.com/static/js/ball.js

1setTimeout(suspensionBall, 500);
2
3function suspensionBall() {
4  var startEvt, moveEvt, endEvt
5
6  if ('ontouchstart' in window) {
7    startEvt = 'touchstart'
8    moveEvt = 'touchmove'
9    endEvt = 'touchend'
10  } else {
11    startEvt = 'mousedown'
12    moveEvt = 'mousemove'
13    endEvt = 'mouseup'
14  }
15
16  var drag = document.getElementById("al_ball")
17  if(!drag){
18    return false
19  }
20  drag.style.position = 'absolute'
21  drag.style.cursor = 'move'
22
23  var isClick = true
24  var disX, disY, left, top, starX, starY
25
26  drag.addEventListener(startEvt, function (e) {
27    e.preventDefault()
28    var e = e || window.event
29    isClick = true
30
31    starX = e.touches ? e.touches[0].clientX : e.clientX
32    starY = e.touches ? e.touches[0].clientY : e.clientY
33
34    disX = starX - drag.offsetLeft
35    disY = starY - drag.offsetTop
36
37    document.addEventListener(moveEvt, moveFun)
38    document.addEventListener(endEvt, endFun)
39  })
40
41  var globalLeft
42  function moveFun(e) {
43    var e = e || window.event
44    isClick = false
45    left = (e.touches ? e.touches[0].clientX : e.clientX) - disX
46    top = (e.touches ? e.touches[0].clientY : e.clientY) - disY
47
48    if (left < 0) {
49      left = 0
50    } else if (left > document.documentElement.clientWidth - drag.offsetWidth) {
51      left = document.documentElement.clientWidth - drag.offsetWidth
52    }
53
54    if (top < 0) {
55      top = 0
56    } else if (top > document.documentElement.clientHeight - drag.offsetHeight) {
57      top = document.documentElement.clientHeight - drag.offsetHeight
58    }
59    drag.style.left = left + 'px'
60    drag.style.top = top + 'px'
61    globalLeft = left
62  }
63
64  function endFun(e) {
65    document.removeEventListener(moveEvt, moveFun)
66    document.removeEventListener(endEvt, endFun)
67    
68    if(isClick){
69        showAl()
70    } else {
71        var clientWidthHalf = e.target.clientWidth / 2,
72        windowWidthHalf = document.body.clientWidth / 2,
73        clientLeft = globalLeft + clientWidthHalf
74        //console.log(clientLeft, windowWidthHalf)
75        if(clientLeft < windowWidthHalf){
76            $("#al_ball").animate({
77               left: 0
78            });
79        } else {
80            $("#al_ball").animate({
81               left: windowWidthHalf * 2 - clientWidthHalf * 2,
82               right: 0
83            });
84        }
85    }
86  }
87}