【雪花点】雪花点的显示——（二）

最新推荐文章于 2021-05-17 11:41:54 发布

weixin_34352449

最新推荐文章于 2021-05-17 11:41:54 发布

阅读量216

点赞数

文章标签：开发工具 javascript ViewUI

这个显示简单，可以更改显示的雪花图标，也可以改为雨点图标。位置也可以修改。

snowy.js

/*
  * version:1.0
  * author:MrZHu
  * Date:2016/7/14
*/

 var snowyPic=$("img").eq(0); //雪花标本
    
     //雪花位置随机数
     function randomAt(){
        var widthPos = Math.random().toString().slice(0,5);
        widthPos =widthPos*1000; 
        if(widthPos >= $(window).width()) widthPos=$(window).width()-100;
        return widthPos;
     }


     //生产雪花标本
     function snowyCreate(speed,size){
        this.speed=speed; //雪花速度
        this.pos_x=randomAt();  //横坐标
        this.pos_y=0;  //纵坐标

        var self=this;
        this.create=function(){ 
          var random=Math.random()+Math.random();
          random=random.toString().slice(2,9);  //id有长度限制
          $("body").append("<img src='img/snow.png' id= '"+random+"'/>");
          var _star=$("#"+random);
          if(size === "normal"){ var snowySize="60px";}
          else if(size === "small"){ var snowySize="30px";}
           else if(size === "big"){var snowySize="90px";}
           _star.css({width:snowySize});
           _star.offset({left:this.pos_x,top:this.pos_y});
          return _star;
        };

        //下落
        this.drift=function(domOb){
           
            var _star=domOb;
            var drop=setInterval(function(){
               //self.pos_x=self.pos_x + Math.random()*50;
               self.pos_x=self.pos_x + 20;
               self.pos_y=self.pos_y +40;
               var _option={
                 left: self.pos_x,
                  top: self.pos_y,
               };
                  if(_star.offset().top <= $(window).height()-100 && _star.offset().left <= $(window).width()-100){
                     _star.offset(_option);

                  }
                  else {
                     _star.remove();
                     clearInterval(drop);
                  }
                },self.speed);
           } ;

             this.drift(this.create());
   }

    //提取参数
     var options={
        speed:function(){
          if(snowyPic.attr("speed") ==="slow") return 200;
          else if(snowyPic.attr("speed") === "normal") return 75;
            else if(snowyPic.attr("speed") === "fast")  return  50;
              else {alert("格式设置有误！"); clearInterval(produce);}
          },
        size:snowyPic.attr("size")
     };

     //测试
    var produce= setInterval(function(){
         var snowy = new snowyCreate(options.speed(),options.size);
    },100);

测试Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>snowy</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <style type="text/css">
       body{
        background-color: gray;
       }
    </style>
</head>
<body>
<img  speed="slow"  size="small"  style="display:none;position:absolute;z-index:1001;" />
WWWWWWWWWWWWWWWWW
<script type="text/javascript" src="js/snowy.js"></script>    
</body>
</html>

效果:

weixin_34352449

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【雪花点】雪花点的显示——（二）

这个显示简单，可以更改显示的雪花图标，也可以改为雨点图标。位置也可以修改。 snowy.js/* * version:1.0 * author:MrZHu * Date:2016/7/14*/ var snowyPic=$("img").eq(0); //雪花标本 //雪花位置随机数 function randomA...
复制链接

扫一扫