js vue 飘雪 落花效果

<template>
	<div class="flower" :style="{width: 1000 + 'px', height: 800+ 'px', }"></div>
</template>
renderLoadAnimation: function() {
      let that = this;
      var block=document.getElementsByClassName("flower")[0];
      for(var i=0;i<30;i++){//花瓣数量
        var snow=document.createElement("img");
        snow.className="snow";
        snow.src="~@/../static/images/flower-"+i%4+".png"; //图片位置
        /*随机大小*/
        var s_w=Math.random()*15+5;
        snow.style.width=s_w+"px";
        snow.style.height=s_w+"px";
        snow.style.opacity=0.7;
        /*随机位置分布*/
        //top值 left值
        //若top值小于自身高度,则设置top,若大于自身高度则top值为获取的高度减去自身高度
        var s_t=Math.random()*that.clientHeight<parseInt(snow.style.height)?Math.random()*that.clientHeight:(Math.random()*that.clientHeight-parseInt(snow.style.height));
        snow.style.top=s_t+"px";
        var s_l=Math.random()*that.clientWidth<parseInt(snow.style.width)?Math.random()*that.clientWidth:(Math.random()*that.clientWidth-parseInt(snow.style.width));
        snow.style.left=s_l+"px";

        block.appendChild(snow);
      }
      var snowh=document.getElementsByClassName("snow");
      setInterval(function (){
        for(var j=0;j<snowh.length;j++){
          //top的改变
          var snow_t=parseInt(snowh[j].style.top);
          snow_t++;
          if(snow_t>that.clientHeight){
              snow_t= -30;
          }
          snowh[j].style.top=snow_t+"px";
          // left的改变
          // var snow_l=parseInt(snowh[j].style.left);
          // snow_l+=Math.sin(snow_t/2*0.1);
          // if(snow_l< 0){
          //     snow_l=that.clientWidth-parseInt(snowh[j].style.left);
          // }
          // if(snow_l>that.clientWidth){
          //     snow_l=0;
          // }
          // snowh[j].style.left=snow_l+"px";
        }
      },50)
    },
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值