javascript实现下雪效果【实例代码】

2019-11-20 10:10:14

字体：大中小

来源：转载

供稿：网友

原理 :

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

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

3、好像不够完善勿喷

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();}// 创建DIVfunction 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实现下雪效果【实例代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：js编写当天简单日历效果【实现代码】

下一篇：vueJS简单的点击显示与隐藏的效果【实现代码】