div跟着手走

标签：repeat   height   end   tde   info   relative   tom   nsf   cat   

    <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);
    },

div跟着手走

标签：repeat   height   end   tde   info   relative   tom   nsf   cat   

原文地址：https://www.cnblogs.com/hyx626/p/11109989.html