原生JS实现雪花特效
今天在校园招聘上被问到的问题，用JS写出雪花的效果。我打算使用多种方法来试试如何实现雪花。
这是目前按照网上某种思路模仿的第一种雪花，不太好看，但是大致意思清楚。
思路1：该思路直接由JS实现。
- 雪花对象的定时创建 + 雪花对象的下落方法（包含消失判定）
- 雪花创建的位置和雪花形状的建立 + 雪花的速度和雪花可能的左右移动和消失
缺点：
- 不好看
- 兼容性
- 雪花方法不好，需要实时检索元素，应该改用数组维持
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,div{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
background-color: #000;
overflow: hidden;
}
#divCanvas{
width: 800px;
height: 800px;
background: #212123;
}
</style>
</head>
<body>
<div id="divCanvas"></div>
</body>
<script type="text/javascript">
var canvas = document.getElementById("divCanvas");
var maxWidth = canvas.clientWidth;
var maxHeight = canvas.clientHeight;
function Obj() {};
Obj.prototype.action = function(o) {
o.style.left = Math.ceil(Math.random() * maxWidth) + "px";
o.style.top = 0 + "px";
var speed = 0;
setInterval(function() {
if (parseInt(o.style.top) < maxHeight) {
o.style.top = parseInt(o.style.top) + speed + "px";
speed += 5;
} else {
o.style.display = "none";
}
}, 400);
}
setInterval(function() {
var oDiv = document.createElement("div");
oDiv.style.color = "#fff";
oDiv.innerHTML = "*";
oDiv.style.position = "absolute";
canvas.appendChild(oDiv);
var obj = new Obj();
obj.action(oDiv);
}, 300);
</script>
</html>
思路2：该思路由JS和CSS3共同实现。
- 雪花对象的创建 + 雪花的方法
- 用CSS3完善雪花的渐隐和出现动画 + 雪花固定的top值增加
缺点:
- 依旧没有用数组来维持，比较占内存
- 不够好看
- 兼容性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,div{
margin: 0;
padding: 0;
}
body{
background: #000;
}
.snow{
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
animation: mysnow 20s;
position: absolute;
}
@keyframes mysnow{
0%{opacity: 0;}
50%{opacity: 1}
100%{opacity: 0;}
}
#canvas{
width: 800px;
height: 800px;
background: #213123;
}
</style>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("canvas");
var maxWidth=canvas.clientWidth;
var maxHeight=canvas.clientHeight;
function Snow(){};
Snow.prototype.Move=function(x){
var speed=Math.ceil(Math.random()*1);
x.style.top=Math.floor(Math.random()*maxWidth);
x.style.left=Math.floor(Math.random()*maxHeight);
setInterval(function(){
if(parseInt(x.style.top)<maxHeight){
x.style.top=parseInt(x.style.top)+speed+"px";
}else{
x.style.display="none";
}
},30);
}
setInterval(function(){
var oDiv=document.createElement("div");
oDiv.className="snow";
oDiv.style.top=0+"px";
oDiv.style.left=Math.ceil(Math.random()*maxHeight)+"px";
canvas.appendChild(oDiv);
var snow=new Snow();
snow.Move(oDiv);
},200);
};
</script>
</head>
<body>
<div id="canvas"></div>
</body>
</html>
思路3：使用数组维持雪花对象，在一开始的时候便随机创建好每个雪花的动态属性
原型模式创建的雪花对象 + 雪花方法
优点：数组维持
缺点：
- 没有用上 window.requestAnimationFrame方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mySnow- oH!!!Sexy!</title>
<style type="text/css">
body,
div {
margin: 0;
padding: 0;
}
body {
background: #000;
}
#curtain {
width: 100%;
height: 600px;
background-color: #111123;
}
.snow {
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
position: absolute;
animation: mysnow 10s;
}
@keyframes mysnow {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.empty {
display: none;
}
</style>
</head>
<body>
<div id="curtain"></div>
</body>
<script type="text/javascript">
(function () {
var $ = function (id) { return typeof id === "string" ? document.getElementById(id) : id };
var curtain = $("curtain");
var maxWidth = curtain.clientWidth - 50;
var maxHeight = curtain.clientHeight;
var snowControl = function () {};
snowControl.prototype = {
Obj: [],
maxCount: 10,
count: 0,
Prepare: function () {
for (var i = 0; i < this.maxCount; i++) {
var o = {
positionX: Math.ceil(Math.random() * maxWidth),
positionY: Math.ceil(Math.random() * 50),
speed: Math.ceil(Math.random() * 5 + 3),
shake: Math.ceil(Math.random() * 3)
};
this.Obj.push(o);
};
},
Init: function () {
if (this.Obj.length) {
var oDiv = document.createElement("div");
oDiv.className = "snow";
var now = this.Obj.shift();
oDiv.style.top = now.positionY + "px";
oDiv.style.left = now.positionX + "px";
curtain.appendChild(oDiv);
// 唤醒 div
this.Move(oDiv, now);
++this.count;
} else {
return false;
}
},
Move: function (oDiv, now) {
var timer = setInterval(function () {
if (now.positionX < maxWidth && now.positionY < maxHeight - 50) {
now.positionY = now.positionY + now.speed;
now.positionX = now.positionX + now.shake;
oDiv.style.top = now.positionY + "px";
oDiv.style.left = now.positionX + "px";
} else {
now.positionX = Math.ceil(Math.random() * maxWidth);
now.positionY = Math.ceil(Math.random() * 50);
oDiv.style.left = now.positionX + "px";
oDiv.style.top = 0 + "px";
}
}, 30);
},
Letsgo: function () {
var oThis = this;
var gotimer = setInterval(function () {
if (oThis.count == oThis.maxCount) {
clearInterval(gotimer);
} else {
oThis.Init();
}
}, 400);
}
};
var snow = new snowControl();
snow.Prepare();
snow.Letsgo();
})();
</script>
</html>
思路4： 使用canvas来实现雪花特效
待更...
原生JS实现雪花特效的更多相关文章
- 原生js实现架子鼓特效
这是代码完成的效果,按下abcd会出现对应的架子鼓音乐的效果. 简单的介绍下代码思路,html和css部分就不多说了. 重要的是js部分. 大致是这样的, 首先获取到所有的按钮为一个数组,然后遍历整个 ...
- Javascript学习记录——原生JS实现旋转木马特效
昨天学习到了JS特效部分,然后老师讲了旋转木马特效的实现,如上图.不过只是讲了通过点击箭头实现图片的切换,对于点击图片本身以及二者联动却是没有讲解. 本着一颗追求完美的心,今天花费了一个中午终于将整个 ...
- 原生js实现雪花飘落效果
雪花飘落的效果实现步骤:1.使用setInterval定时器每800毫秒创建一个雪花:2.把每一个雪花作为参数传进动态下落的方法中即可. <style> *{padding: 0;marg ...
- HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）
原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...
- 原生js写的贪吃蛇网页版游戏特效
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...
- 原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
- 原生js和jquery实现图片轮播特效
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- 原生js和jquery实现图片轮播特效(转)
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等
在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...
随机推荐
- 【二叉查找树】04根据升序数组构造二叉查找树【Convert Sorted Array to Binary Search Tree】
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 给定一个升序的数组,把他转换成一个 ...
- fswebcam 获取图片
/************************************************************************* * fswebcam 获取图片 * 说明: * 通 ...
- 七牛 python
Python SDK使用指南 上传策略 变量 对象存储 API 参考手册 多媒体数据处理 API 参考手册
- bzoj 3514: GERALD07加强版 lct+可持久化线段树
题目大意: N个点M条边的无向图,询问保留图中编号在[l,r]的边的时候图中的联通块个数. 题解: 这道题考试的时候没想出来 于是便爆炸了 结果今天下午拿出昨天准备的题表准备做题的时候 题表里就有这题 ...
- backbonejs学习
文章: http://www.cnblogs.com/yexiaochai/archive/2013/07/27/3219402.html http://blog.csdn.net/cony100/a ...
- 采用MySQL_upgrade升级授权表方式升级
1.7.1 采用MySQL_upgrade升级授权表方式升级(1) 这种升级方式比较省事,通过MySQL_upgrade命令即可完成.下面来演示一下整个升级过程. 1)修改my.cnf配置文件,因为M ...
- java中toString() 、(String)、String.valueOf的区别
1.采用toString() 在使用时要注意,必须保证object不是null值,否则将抛出NullPointerException异常.采用这种方法时,通常派生类会覆盖Object里的toStrin ...
- 随机数 while循环 do while循环 for循环
1.随机数 arc4random() 返回一个随机数 如果要随机［a,b］范围内的随机数 arc4random() % (b - a + 1) + a ; 2.break 跳出本次循 ...
- 【转】 Pro Android学习笔记（三五）：Menu（6）：XML方式 & PopUp菜单
目录(?)[-] 利用XML创建菜单 XML的有关属性 onClick事件 Pop-up菜单 利用XML创建菜单 在代码中对每个菜单项进行设置,繁琐且修改不灵活,不能适配多国语言的要求,可以利用资源进 ...
- 关于使用C# 启动msi失败的问题
原以为在启动msi是件小儿科的事,上代码: ProcessStartInfo psi = new ProcessStartInfo(); psi.FileName = "C:\\myTest ...