下雪了 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 相关文章推荐
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
JavaScript中的继承之类继承
May 01 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
Node.js实现发送邮件功能
Nov 06 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
Vue实现返回顶部按钮实例代码
Oct 21 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获取post中的json数据的实现方法
2011/06/08 PHP
php selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
CI框架中zip类应用示例
2014/06/17 PHP
php支付宝接口用法分析
2015/01/04 PHP
开启PHP的伪静态模式
2015/12/31 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
php的4种常用运行方式详解
2016/12/22 PHP
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
加载列表时jquery获取ul中第一个li的属性
2014/11/02 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
vue中的模态对话框组件实现过程
2018/05/01 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
解决导入django_filters不成功问题No module named 'django_filter'
2020/07/15 Python
python zip()函数的使用示例
2020/09/23 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
shallow copy和deep copy的区别
2016/05/09 面试题
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
幼师求职自荐信范文
2014/01/26 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
售后服务经理岗位职责范本
2014/02/22 职场文书
校园联欢晚会主持词
2014/03/17 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
导游词之上饶龟峰
2019/10/25 职场文书