开发者社区> 水灵儿> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JS实现下雪效果

简介: JS实现下雪效果
+关注继续查看

原理:

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】-------javaScript实现两个时间相差多少分钟! 实例代码
120 0
js之如何在JavaScript中实现睡眠功能
js之如何在JavaScript中实现睡眠功能
4997 0
JavaScript使用Modbus协议实现RTU设备连云
在阿里云物联网平台下发物模型属性设置数据,HaaS600Kit 接收并解析云端数据后控制 Modbus 继电器设备进行开关动作。
707 0
使用JavaScript在HaaS EDU K1上实现文字显示
当前HaaS EDU K1已经支持通过JS轻应用方式进行开发调试了,这块开发板带着OLED屏,而底层的AliOS Things已经支持图形库,所以可以通过轻应用的开发方式,尝试进行GUI相应的开发。
229 0
带你读《区块链开发实战: 基于JavaScript的公链与DApp开发》之一:自己动手实现一个区块链系统
本书用三个部分讲解了区块链技术以及Asch的相关实践,第一部分讲解了区块链技术的基本概念,并用300行代码实现了一个最小的、可运行的区块链;第二部分分析Asch的源码,讲解Asch的实现原理;第三部分介绍了基于Asch的侧链技术的DApp开发实战。
2436 0
javascript--实现购物车的实例分享
购物车对于大部分用户来说肯定都不陌生,每当双十一、双十二,我们都要把自己想要买的东西,提前加入购物车中,等到11月11号的凌晨抢时间抓紧下单。这对于用户来说,既可以管理自己想要购买的物品,又可以在购物车中进行选择。
2183 0
javascript教程:实现函数柯里化与反柯里化
下面来一起看看究竟什么是函数柯里化 维基百科的解释是:把接收多个参数的函数变换成接收一个单一参数(最初函数的第一个参数)的函数,并返回接受剩余的参数而且返回结果的新函数的技术。其由数学家Haskell Brooks Curry提出,并以curry命名。
1275 0
+关注
水灵儿
www.zyl.me 爱折腾,喜欢造,花起钱来毫不心疼,事后沉默一周... 极简主义者,主从事Web开发兼前端爱好者。 全栈开发尝试者、自媒体、极简主义者、爱心极客
文章
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
Python第五讲——关于爬虫如何做js逆向的思路
立即下载
编程语言如何演化—— 以 JS 的 private 为例
立即下载