下雪了 javascript实现雪花飞舞
作者：九成 时间：2024-05-02 16:16:12
本文实例为大家分享了雪花飞舞效果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);
}
标签：js,下雪,雪花飞舞
0
投稿猜你喜欢
python3音乐播放器简单实现代码
2022-06-12 04:43:14
css行高：line-height属性详解
2008-06-24 11:42:00
js经验分享 JavaScript反调试技巧
2023-07-13 07:53:04
PHP中判断变量为空的几种方法分享
2024-06-05 09:35:25
推荐:怎么用javascript进行拖拽
2007-09-21 20:14:00
Python 2.7中文显示与处理方法
2021-06-14 16:07:39
Python实现读取txt文件中的数据并绘制出图形操作示例
2021-07-21 17:01:15
在Django的View中使用asyncio的方法
2022-04-10 13:16:41
Python列表删除的三种方法代码分享
2022-10-26 19:13:35
php绘制圆形的方法
2023-10-29 17:31:52
Python实现自动登录百度空间的方法
2023-11-11 09:11:23
教你用python从日期中获取年、月、日和星期等30种信息
2023-05-06 22:32:38
Centos7 安装 PHP7最新版的详细教程
2023-10-16 21:14:12
python保存二维数组到txt文件中的方法
2022-03-06 23:32:24
Hadoop 文件系统命令行基础详解
2023-08-31 13:57:03
使用pyinstaller打包django的方法实现
2021-04-10 21:58:11
MySQL的 DDL和DML和DQL的基本语法详解
2024-01-15 06:40:43
document.all与WEB标准
2008-03-16 14:28:00
Python Scapy随心所欲研究TCP协议栈
2023-06-10 23:12:29
(100-1)％ 的内容是导航
2008-01-11 19:23:00