澳门威利斯人_威利斯人娱乐「手机版」

来自 网络资讯 2019-07-28 04:26 的文章
当前位置: 澳门威利斯人 > 网络资讯 > 正文

vue移动端实现红包雨效果,微信小程序实现红包

本文实例为大家享用了vue完成红包雨效果的具体代码,供大家参照他事他说加以考察,具体内容如下

本文为大家享用了微信小程序实现红包雨的切实可行代码,供大家参谋,具体内容如下

正文实例为大家享受了js达成红包雨体现的具体代码,供大家参谋,具体内容如下

图片 1

前几日有个小师妹来问作者什么用微信小程序达成红包雨效果,即使用web很好贯彻,但是小程序不是那么轻便,整合和睦也会有一年没摸过小程序了,决定试一试。

1.html部分

上边是代码:

率先确定“红包雨”的必要:

红包的样板,先写一个模板在页面上

<template>
  <div class="ser_home">
    <ul class="red_packet" id="red_packet">
      <template v-for="(item, index) in liParams">
        <li :style="{ left: item.left, animationDuration: item.durTime, webkitAnimationDuration: item.durTime}" 
 :class="item.cls" :data-index="index" @webkitAnimationEnd="removeDom">
          <a href='javascript:;'>
            <i :style="{ transform: item.transforms, webkitTransform: item.transforms}"></i>
          </a>
        </li>
      </template>
    </ul>
  </div>
</template>


<script>
export default {
  data () {
    return {
      liParams: [],
      timer: null,
      duration: 10000 // 定义时间
    }
  },
  mounted () {
    this.startRedPacket()
  },
  methods: {
    /**
     * 开启动画
     */
    startRedPacket() {
      let win = document.documentElement.clientWidth || document.body.clientWidth
      let left = parseInt(Math.random() * (win - 50)   0);

      let rotate = (parseInt(Math.random() * (45 - (-45)) - 45))   "deg"; // 旋转角度
      let scales = (Math.random() * (12 - 8   1)   8) * 0.1; // 图片尺寸
      let durTime = (Math.random() * (2.5 - 1.2   1)   1.2)   's'; // 时间 1.2和1.2这个数值保持一样
      console.log(durTime)
      this.liParams.push({left: left 'px', cls: 'move_1', transforms: 'rotate('  rotate  ') scale('  scales  ')', durTime: durTime})


      setTimeout( () => {  // 多少时间结束
        clearTimeout(this.timer)
        return;
      }, this.duration)


      this.timer = setTimeout( () => {
        this.startRedPacket()
      },100)  
    },
    /**
     * 回收dom节点
     */
    removeDom (e) {
      let target = e.currentTarget;
      document.querySelector('#red_packet').removeChild(target)
    }
  }
}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.ser_home {
  width: 100%;
  height: 100%;
}
.red_packet {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  i {
    width: 48px;
    height: 69px;
    display: block;
    background: url('/hongbao.png') no-repeat;
  }
  li {
    position: absolute;
    animation: all 3s linear;
    top:-100px;
    z-index: 10;
    &.move_1 {
      -webkit-animation: aim_move 5s linear 1 forwards;
      animation: aim_move 5s linear 1 forwards;
    }
  }
  a {
    display: block;
  }
}


@keyframes aim_move {
   0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
   }
   100% {
    -webkit-transform: translateY(120vh);
    transform: translateY(120vh);
   }
  }

</style>
  • 自由地方掉落
  • 随意红包样式
  • 同一时间掉落个数随机
  • 各样红包的掉落速度随机,但不可能太快也不能够太慢
 <div class="hide">
 <div class="RedPackage__Box js-RedPackageBox" data-txt>
  <img src="./images/redPackage.png" alt="图片 2">
 </div>
</div>

效果图:

先是拜谒自家做的功力啊

展现红包的容器

图片 3

图片 4

<div class="RedPackage__Main js-RedPackage"></div>

以上便是本文的全部内容,希望对大家的求学抱有帮忙,也期望大家多多扶助脚本之家。

    首先确定小程序完结红包雨和web网页完毕红包雨难题上有啥差别:

2.js部分

本文由澳门威利斯人发布于网络资讯,转载请注明出处:vue移动端实现红包雨效果,微信小程序实现红包

关键词: 澳门威利斯人