下雪了 javascript实现雪花飞舞

  • Z时代
  • 2024-01-10
  • 分类：综合

本文实例为大家分享了雪花飞舞效果javascript实现，供大家参考，具体内容如下

原理:

1、js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果。

2、js获取创建的DIV并改变其top属性值，当下落的高度大于屏幕高后删除该移动div

3、好像不够完善勿喷

效果预览:http://wjf444128852.github.io/demo02/snow/index.html

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>雪花飞舞</title>
 <link rel="stylesheet" href="css/index.css">
 <script src="js/move.js"></script>
</head>
<body>
 <div class="snow_parent" id="js_sonw">
 </div>
</body>
</html>

CSS代码

*{
 margin:0;
 padding:0;
 list-style: none;
 border: none;
}
body{
 width: 100%;
 height:600px;
 background:#000;
}
.snow_parent{
 position: relative;
 width: 100%;
 height:100%;
 overflow: hidden;
 margin: 0 auto;
}
.snow_parent div.parent{
 background-image: url(../img/snow.png);
 float: left;
 -webkit-transform: scale(.1);
 -moz-transform: scale(.1);
 -o-transform: scale(.1);
 -ms-transform: scale(.1);
 transform: scale(.1);
 position: absolute;
}
.snow_one{
 width: 180px;
 height: 180px;
 background-position:0 0;
 background-repeat: no-repeat;
 left:-70px;
 top: -95px;
}
.snow_two{
 width: 140px;
 height: 140px;
 background-position:-220px -18px;
 left:-30px;
 top: -75px;
}
.snow_three{
 width:150px;
 height: 150px;
 background-position:-400px -15px;
 left:-20px;
 top: -80px;
}
.snow_four{
 width: 160px;
 height: 160px;
 background-position:-10px -206px; 
}
.snow_four{
 left:-10px;
 top: -85px;
}

JS代码:

/*
 creatBy jiucheng 2016-4-24
*/ 
window.onload=function(){
 init();
}
// 创建DIV
function creatDiv(){
 // 创建DIV并追加到父元素
 var snowDiv=document.createElement("div");
 document.getElementById("js_sonw").appendChild(snowDiv);
 // 让创建DIV的class为随机，显示不同的雪花
 var whatName=["snow_one parent","snow_two parent","snow_three parent","snow_four parent"];
 var index=Math.floor(Math.random()*whatName.length);
 snowDiv.className=whatName[index];
 // 获取该DIV的left属性值(随机的)并赋值给创建的DIV
 var whatLeft=getLeft()+'px';
 snowDiv.style.left=whatLeft;
 return snowDiv;
}
// 获取随机left属性值
function getLeft(){
 // 获取该DIV的最大left属性值即父元素的宽度
 var eleParent=document.getElementById("js_sonw");
 // 获取父元素的所有style样式
 var style=window.getComputedStyle(eleParent);
 // CSS中的left是负数这里得减去下
 var maxWidth=parseInt(style.width)+70;
 // 让创建的DIV的left为随机值
 var randomLeft=Math.floor(Math.random()*maxWidth);
 return randomLeft;
}
// 让其向下移动
function moveDown(){
 // 获取移动对象
 var moveElem=creatDiv();
 // 获取移动对象的所有style属性值
 var eleStyle=window.getComputedStyle(moveElem);
 // 获取它的top属性值
 var eleTop=parseInt(eleStyle.top);
 // 设置定时器动态改变移动对象的top属性值
 var t=setInterval(function(){
 eleTop++;
 // 把新的top值付给移动对象
 moveElem.style.top=eleTop+"px";
 // 当下落到屏幕的高度后停止定时器并把该移动对象从父元素删除
 if(eleTop>=window.innerHeight){ 
  clearInterval(t);
  document.getElementById("js_sonw").removeChild(moveElem);
 } 
 },10);//下落速度没10毫秒下落1px
}
function init(){
 // 动态获取并设置body的高度
 document.body.style.height=window.innerHeight+"px";
 // 每500毫秒创建一个移动对象并执行移动函数
 var t=setInterval(function(){
 moveDown();
 },100);
}

以上是 下雪了 javascript实现雪花飞舞 的全部内容， 来源链接： utcz.com/z/357851.html

回到顶部