下雪了 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 相关文章推荐
根据地区不同显示时间的javascript代码
Aug 13 Javascript
javascript 遍历验证所有文本框的值
Aug 27 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
基于javascript实现页面加载loading效果
Sep 15 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 Javascript
微信小程序的tab选项卡的实现效果
May 15 Javascript
node+multer实现图片上传的示例代码
Feb 18 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
杏林同学录(四)
2006/10/09 PHP
PHP+DBM的同学录程序(3)
2006/10/09 PHP
php 使用post,get的一种简洁方式
2010/04/25 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
javascript document.execCommand() 常用解析
2009/12/14 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
javascript入门教程基础篇
2015/11/16 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
Vue 去除路径中的#号
2018/04/19 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
python语言元素知识点详解
2019/05/15 Python
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
iostream与iostream.h的区别
2015/01/16 面试题
大学生军训广播稿
2014/01/24 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
检察院起诉书
2015/05/20 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
详解在OpenCV中如何使用图像像素
2022/03/03 Python