JS实现抽奖名字雪花飘动画

<script type="text/javascript">
         var windowWidth = window.screen.width;
        var windowHeight = window.screen.height;
        var snowfly=[];
         var userlist = ["111张三","222李四","333王五","444赵六","555小二"];
        //异步IE缓存问题 
        $.ajaxSetup({cache:false})
 
        //创建雪花
        var indexSnow=0;
        function createSnow() {

          //位置定义

          var speedleft = 50 - Math.random() * 100;
          var speedtop = 50 - Math.random() * 100;
          var div = document.createElement('div');
         
          div.className = 'snow';
          div.style.left =  windowWidth / 2-100 + "px";
          div.style.top = windowHeight / 2 - 100 + "px";
         //速度定义
           if (Math.abs(speedleft) < 1) {
                        speedleft += 2;
                    }
                    if (Math.abs(speedtop) < 1) {
                        speedtop += 2;
                    }


            div.style.transform = 'scale(' + (Math.random()) + ')';

          div.innerHTML = userlist[Math.floor(Math.random() * userlist.length)];
          
          

            document.body.appendChild(div);
 
          //雪花飘落
          snowfly[indexSnow] = setInterval(function () {


              div.style.left = div.offsetLeft + speedleft + 'px';
              div.style.top = div.offsetTop + speedtop + 'px'

              //如果雪花跑到屏幕外面了,让雪花重新返回屏幕顶部
              if (div.offsetLeft > windowWidth || div.offsetLeft < 0 || div.offsetTop > windowHeight || div.offsetTop < 0) {
                  div.style.left = windowWidth / 2 - 100 + "px";
                  div.style.top = windowHeight / 2 - 100 + "px";
                  
                  speedleft = 50 - Math.random() * 100;
                  speedtop = 50 - Math.random() * 100;

                  if (Math.abs(speedleft) < 1) {
                      speedleft += 2;
                  }
                  if (Math.abs(speedtop) < 1) {
                      speedtop += 2;
                  }


                  div.innerHTML = userlist[Math.floor(Math.random() * userlist.length)];


              }


          }, 100);

          indexSnow++;
      }
       
 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值