js+css动画实现横向滚动抽奖效果实现

qq_53001158

于 2024-05-11 17:08:08 发布

阅读量663

点赞数 15

文章标签： javascript css 前端 vue.js css3 开发语言 elementui

本文链接：https://blog.csdn.net/qq_53001158/article/details/138722191

版权

代码如下:

<template>

   <div>
    <div class="box" id="parent-width">
      <el-icon class="box-icon">
        <CaretBottom/>
      </el-icon>
      <div class="all-list" :style="animation">
        <div class="list-item" v-for="item in 49">{{ item }}</div>
      </div>
      <el-icon class="box-icon">
        <CaretTop/>
      </el-icon>
    </div>
    当前中奖下标: 30
    <el-button type="primary" @click="start">开 始</el-button>
  </div>
</template>

<script>
export default {
  name: 'test',
  data(){
    return{
      animation:{},
    }
  },
  mounted() {

  },
  methods: {
    start(){
        //计算平移位置  (奖池长度 * 盒子宽度) + (奖池长度 * 外边距) + ((中奖下标 - 奖池长度) * （盒子宽度 + 外边距)) - (父盒子总宽度 / 2) + (盒子宽度 + 外边距)/2
      let jcLength = 49;  // 奖池数组长度
      let boxWidth = 80; // 盒子宽度
      let marginWidth = 20; //盒子之间的间隔
      let parentWidth = document.getElementById('parent-width').offsetWidth; //父盒子总宽度
      let result = (jcLength * boxWidth) + (jcLength * marginWidth) + ((30 - jcLength) * (boxWidth + marginWidth)) - (parentWidth /2) + (boxWidth + marginWidth)/2; //这里默认中奖下标是30
      this.animation = {
          transform: `translate(-${result}px)`,
          transitionDuration: '3s'
      }
      setTimeout(()=>{
        this.animation = {
            transform: "translateX(0) translateY(0)",
            willChange: "transform"
          }
      },6000) //三秒后回到初始位置
    },
  }
};
</script>


<style lang="scss" scoped>
.box, #parent-width{
  width: 600px;
  height: 200px;
  background: rgba(43,55,61,0.37);
  overflow: auto;
  display: flex;
  flex-direction: column
}
.box-icon{
  margin: 0 auto;
}
.all-list{
  width: 7000px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  overflow-x: auto;
}

.list-item{
  width: 80px;
  height: 100px;
  background: #2c7ef8;
  margin: 10px;
}

</style>

实现效果如下: