Lsw7777777
Lsw7777777
2021-03-30 10:28
采纳率: 83.3%
浏览 120

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

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • qq_38334525
    默默地写代码 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

    点赞 评论
  • weixin_44058725

    看看这个nipple.JS  。https://www.npmjs.com/package/nipplejs js库

    点赞 评论
  • qq_44104785
    开发者小峰 2021-03-30 11:27

    监听touch事件

    点赞 评论

相关推荐