vue制作抓娃娃机的示例代码

height: 90px;
background: url(./../assets/img/button.png) no-repeat;
background-size: 100%;
position: absolute;
bottom: 20px;
left: 40%;
}
}

接下来就是卡片滚动，设置定时器，给卡片模块设置transform 让卡片从右向左匀速移动。

 mounted() {
 this.wawa();
 this.talon = $(".pawerPic").offset().left + 100; // 首先获取爪子的位置(这里是固定的)
 }
wawa() {
  var pack = this.$refs.pack,
  width = $("#pack").width(),
  imgsWidth = (this.imgs.length * width) / 3,
  initLeft = 0;
  this.chatTimer = setInterval(function() {
  initLeft++;
  if (imgsWidth - initLeft < width + 60) {
   initLeft = 0;
  }
  $("#sel1").css({
   width: imgsWidth,
   transform: "translateX(-" + initLeft + "px)"
  });
  }, 15);
 },

再接着就是点击按钮控制爪子上下移动抓取卡片。 首先固定爪子的位置，上图代码中mounted里面的talon，然后设置爪子到下面的终止距离（差不多能够到卡片），为爪子设置动画改变top值，拉长绳子改变height值（因为爪子和绳子是分开的）。 当爪子到达下面时，获取每个卡片的位置，与爪子当前位置作比较，看爪子是否在某个卡片的指定抓取区域内来判断是否抓到卡片，然后上升。 上代码！！！

代码全部贴上了，很多功能都是因为自己的需求去加的。 第一次写文章，可能具体的表述不清楚。

到此这篇关于vue制作抓娃娃机的示例代码的文章就介绍到这了,更多相关vue 抓娃娃机内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！