Vue.js制作老虎机抽奖

我就先直接上代码了吧~
实现原理是使用background的background-position-Y属性每隔100毫秒或者50毫秒增加background-position-Y的值，背景图一定要是雪碧图哦～

自定义组件内：
<template>
<div class="tiger_box">
  <img src="https://ojlf2aayk.qnssl.com/20180328squerleft.png" class="leftIcon">
  <img src="https://ojlf2aayk.qnssl.com/20180328squeright.png" class="rightIcon">
  <img src="https://ojlf2aayk.qnssl.com/20180328top.png" class="topIcon">
  <img src="https://ojlf2aayk.qnssl.com/20180328down.png" class="bottomIcon">
  <ul class="one">
    <li class="second" v-for="(item,index) in options" :key="index" :style="{background: 'url(' + item.img + ')',backgroundSize: '100% 100%',backgroundPositionY: run ? drawn ? (rotateDeg + index * 3)  + 'rem' : (rotateDeg + index) + 'rem' : 0, transitionProperty : isTranstion ? 'all' : 'none', transitionDelay: index * 100 + 'ms', transitionDuration: speed + 's'}">
      <img src="https://ojlf2aayk.qnssl.com/20180328currentline.png" v-if="index !== 0" style="width: .02rem; margin-top: .05rem;">
    </li>
  </ul>
</div>
</template>

<script>
export default {
  props: {
    isTranstion: {
      type: Boolean,
      default: true
    },
    run: {
      type: Boolean,
      default: false
    },
    drawn: {
      type: Boolean,
      default: false
    },
    rotateDeg: {
      type: Number,
      default: 0
    },
    background: {
      type: String,
      default: ''
    },
    speed: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      options: [
        {
          img: this.background
        },
        {
          img: this.background
        },
        {
          img: this.background
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.tiger_box {
    position: relative;
    margin-top: -93%;
    width: 57.5%;
    margin-left: 20.5%;
    border-radius: 0.1rem;
    height: 1rem;
    overflow: hidden;
    float: left;
    .leftIcon {
        position: absolute;
        width: 0.07rem;
        left: 0;
        z-index: 1;
        top: 0.43rem;
    }
    .rightIcon {
        position: absolute;
        width: 0.07rem;
        right: 0;
        z-index: 1;
        top: 0.43rem;
    }
    .topIcon {
        width: 100%;
        position: absolute;
        top: 0;
        z-index: 9;
    }
    .bottomIcon {
        width: 100%;
        position: absolute;
        bottom: 0;
        z-index: 9;
    }
    .one {
        width: 100%;
        height: 1rem;
        background-size: 100% 100%;
        float: left;
        background-attachment: scroll;
        -webkit-transform: transition3d(0, 0, 0);
        position: relative;
        overflow: hidden;
        border-radius: 0.08rem;
        .second {
            float: left;
            width: 33.3%;
            height: 3rem;
            background-size: 100% 100%;
            position: relative;
            overflow: hidden;
            img {
                width: 2px;
                margin-top: 0.05rem;
            }
        }
    }
}
</style>

页面引用：
<route-frame :run="runStart" :drawn="isDraw" :background="image" :speed="10" :rotateDeg="rotateDeg" :isTranstion="isTranstion"></route-frame>

image.png

效果地址：https://m.qtshe.com/act/alipayNewAct

青团社招聘：

招聘岗位：高级前端开发工程师P5及以上

简历投递到：hr@qtshe.com || haochen@qtshe.com

职位描述：

1、建设工具、提炼组件、抽象框架，促进前端工程化、服务化，持续提升研发效率，保障线上产品质量

2、构建H5/PC应用基础设施，主导建设前端各种发布/监控等平台，指导落实解决方案

3、持续优化前端页面性能，维护前端代码规范，钻研各种前沿技术和创新交互，增强用户体验、开拓前端能力边界