下雪了-js下雪效果

Jingle Bells,Jingle Bells,圣诞来临，做了一个下雪的小程序玩。有大雪花和小雪花。

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body
{
  overflow:hidden;
  background:#0099FF;
}
.smallSnowflake,.largeSnowflake
{
 font-size:38px;
 color:white;
 position:absolute;
}
.largeSnowflake{
 font-size:48px;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var snow=new Snow();
  snow.start();
};
function Snow(){
    this.sky=document.body;
    this.width=document.documentElement.clientWidth;
    this.height=document.documentElement.clientHeight;
}
Snow.prototype={
  start:function(){
    var _this=this;
    _this.createSmallSnowflake();
    _this.createLargeSnowflake();
  },
  createSmallSnowflake:function(){
    var _this=this;
    setInterval(function(){
      var smallSnow=document.createElement('p');
      smallSnow.innerHTML='*';
      smallSnow.className='smallSnowflake';
      smallSnow.style.left=Math.round(Math.random()*_this.width)+'px';
      _this.sky.appendChild(smallSnow);
      _this.slide(smallSnow);
    },1000);
  },
  createLargeSnowflake:function(){
    var _this=this;
    setInterval(function(){
      var largeSnow=document.createElement('p');
      largeSnow.innerHTML='*';
      largeSnow.className='largeSnowflake';
      largeSnow.style.left=Math.round(Math.random()*_this.width)+'px';
      _this.sky.appendChild(largeSnow);
      _this.slide(largeSnow);
    },2000);
  },
  slide:function(ele){
     var _this=this;
     var timer=setInterval(function(){
       var t=ele.offsetTop;
       ele.style.top=t+5+'px';

if(ele.offsetTop+ele.style.height>_this.height)

{

_this.sky.removeChild(ele);

clearInterval(timer);

}


     },1000);
  }
};
</script>
</head>
<body>
</body>
</html>

效果图：

转眼又是年末了，又要跨年了。希望新的一年所有愿望可以实现，加油。

posted on 2014-12-18 20:10 清姿阅读(400) 评论(0) 编辑收藏举报