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

原理 :

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

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

3、好像不够完善勿喷

HTML代码：

<Meta charset="UTF-8"> 雪花飞舞

CSS代码

JS代码:

<div class="jb51code">
<pre class="brush: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实现下雪效果【实例代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。

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

猜你在找的JavaScript相关文章