Java永远的神_ 2021-03-30 10:28 采纳率: 97.7%
浏览 763
已采纳

前端移动端JS怎么实现摇杆控制？就是类似玩着荣耀那个圆圈滑动可以控制方向的

就是一个大圆圈，里面一个小圆圈，控制小圆圈滑动，松开小圆圈回到中心，滑动之后可以得到XY的坐标轴

  • 写回答

3条回答 默认 最新

  • 默默地写代码 2021-03-30 11:37
    关注

    松手可回弹

    <!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

  <div id='container'>
  <div>(but not too far)</div>
  <div id='draggable'>Drag me!</div>
</div>
<script src='js/TweenMax.min.js'></script>
<script src='js/Draggable.min.js'></script>
<script  src="js/index.js"></script>
</body>

</html>

    body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color:#f1f1f1;
}

#container {
  position:absolute;
  margin:auto;
  left:0;
  right:0;
  top:0;
  bottom:0;
  width:600px;
  height:600px;
  border-radius:50%;
  border:2px solid #aaa;
  background-color: #eee;
  text-align:center;
  line-height:600px;
  font-size:12px;
}

#draggable {
  position:absolute;
  width:100px;
  height:100px;
  left:250px;
  top:250px;
  border-radius:50%;
  
  background-color:#88CE02;
  color:#000;
  text-align:center;
  font-weight:bold;
  font-size:16px;
  line-height:100px;
}


    // index.js

var MAX_DISTANCE = 300;

var draggable = document.getElementById('draggable');

Draggable.create(draggable, {
  onDrag:function(e) {
    var x = this.target._gsTransform.x,
        y = this.target._gsTransform.y,
        distance = Math.sqrt(x * x + y * y);
    
    if (distance > MAX_DISTANCE) {
    	 this.endDrag(e);
    }
  },
  onDragEnd:function() {
    TweenMax.to(draggable, 1, {x:0, y:0, ease:Elastic.easeOut});
  }
});

    另外两个JS文件下载地址

    https://gitee.com/gaoweichao/open/blob/master/TweenMax.min.js

    https://gitee.com/gaoweichao/open/blob/master/Draggable.min.js

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？