下雪了 javascript实现雪花飞舞


Posted in Javascript onAugust 02, 2020

本文实例为大家分享了雪花飞舞效果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程序设计有所帮助。

Javascript 相关文章推荐
自己做的模拟模态对话框实现代码
May 23 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
js表头排序实现方法
Jan 16 Javascript
jQuery实现html表格动态添加新行的方法
May 28 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
深入理解JS addLoadEvent函数
May 20 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 Javascript
基于node实现websocket协议
Apr 25 #Javascript
Bootstrap每天必学之导航组件
Apr 25 #Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 #Javascript
javascript断点调试心得分享
Apr 23 #Javascript
基于 Node.js 实现前后端分离
Apr 23 #Javascript
javascript学习指南之回调问题
Apr 23 #Javascript
探寻JavaScript中this指针指向
Apr 23 #Javascript
You might like
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
php利用header函数下载各种文件
2016/08/24 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
JavaScript图片处理与合成总结
2018/03/04 Javascript
VueJs组件之父子通讯的方式
2018/05/06 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
python解析json实例方法
2013/11/19 Python
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
python编写微信公众号首图思路详解
2019/12/13 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
继承权公证书
2014/04/09 职场文书
核心价值观演讲稿
2014/05/13 职场文书
培训研修方案
2014/06/06 职场文书
会计系毕业求职信
2014/08/07 职场文书
2014年小学教导处工作总结
2014/12/19 职场文书