下雪了 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真的不难-回顾一下基础知识
Jan 15 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
jQuery之动画效果大全
Nov 09 Javascript
巧用数组制作图片切换js代码
Nov 29 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 Javascript
微信小程序实现表单校验功能
Mar 30 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
Oct 24 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 Javascript
微信小程序实现点击导航条切换页面
Nov 19 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 json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
tensorflow 大于某个值为1,小于为0的实例
2020/06/30 Python
详解python中的lambda与sorted函数
2020/09/04 Python
python实现图片转字符画的完整代码
2021/02/21 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
财务会计毕业生个人求职信
2014/02/03 职场文书
运动会通讯稿500字
2014/02/20 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
党支部特色活动方案
2014/08/20 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
python实现简单的名片管理系统
2021/04/26 Python
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技