下雪了 javascript实现雪花飞舞

前端之家收集整理的这篇文章主要介绍了下雪了 javascript实现雪花飞舞前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

原理:

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

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

3、好像不够完善勿喷

效果预览:nofollow" target="_blank" href="http://wjf444128852.github.io/demo02/snow/index.html">http://wjf444128852.github.io/demo02/snow/index.html

HTML代码

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

CSS代码

JS代码:

=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程序设计有所帮助。

原文链接:https://www.f2er.com/js/49185.html

猜你在找的JavaScript相关文章