div跟着手走

Posted 2022-03-02 hyx626

    <div class="box5" id="goMy" @click="goMy">
      <div class="circle">
        <span class="personIcon"></span>
      </div>
    </div>

.index .box5 
  position: fixed;
  bottom: 10%;
  right: 6%;
  width: 52px;
  height: 52px;
  z-index: 999999;
  -webkit-tap-highlight-color: transparent;



.index .box5 .circle 
  width: 52px;
  height: 52px;
  background-color: rgba(61, 61, 61, 0.5);
  /*background-color: #8b8b8b;*/
  background: url('../assets/image/circle.png') no-repeat;
  background-size: 100% 100%;
  border-radius: 50%;
  position: relative;



.index .box5 .circle .personIcon 
  display: inline-block;
  width: 0.46666667rem;
  height: 0.56rem;
  background: url("../assets/image/personIcon1.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)

 goMyImgAnimation() 
      // 去个人中心页图标跟着手走效果
      var goMy = document.getElementById('goMy');
      var winWidth = window.innerWidth;
      var winHeight = window.innerHeight;
      var endTouchY = 0;
      var endTouchX = 0;
      var downTime = 0;
      goMy.addEventListener('touchstart', function(ev) 
        downTime = Date.now();
        var ev = ev.touches[0];
        endTouchX = ev.pageX;
        endTouchY = ev.pageY;
        this.addEventListener('touchmove', function(ev) 
          // console.log('走')
          ev.preventDefault();
          var ev = ev.touches[0];
          goMy.style.top = (ev.pageY - 25) + 'px';
          goMy.style.left = (ev.pageX - 25) + 'px';
          endTouchX = ev.pageX;
          endTouchY = ev.pageY;
        , false);
        this.addEventListener('touchend', function(ev) 
          // console.log('起');
          this.ontouchmove = null;
          this.ontouchend = null;
          if (Date.now() - downTime < 300) 
            // window.location.href = "/info";
            return;
          
          var x = (endTouchX - 26) > 0 ? (endTouchX - 26) : 0;
          var y = (endTouchY - 26) > 0 ? (endTouchY - 26) : 0;
          x = (x > (winWidth - 52)) ? (winWidth - 52) : x;
          y = (y > (winHeight - 52)) ? (winHeight - 52) : y;
          goMy.style.left = x + 'px';
          goMy.style.top = y + 'px';
        , false);
      , false);
    ,