原生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图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...
随机推荐
- linux导出Mysql数据sql脚本
- centos下安装Mysql5.7.20
0.环境 本文操作系统: CentOS 7.2.1511 x86_64MySQL 版本: 5.7.16 1.卸载系统自带的 mariadb-lib [root@centos-linux ~]# rpm ...
- POJ1379：Run Away
我对模拟退火的理解:https://www.cnblogs.com/AKMer/p/9580982.html 我对爬山的理解:https://www.cnblogs.com/AKMer/p/95552 ...
- java多线程编程核心技术——第三章总结
第一节等待/通知机制 1.1不使用等待/通知机制实现线程间的通讯 1.2什么是等待/通知机制 1.3等待/通知机制的实现 1.4方法wait()锁释放与notify()锁不释放 1.5当interru ...
- 有关HL7 的C# 源码
https://github.com/OSEHRA/mdo C# http://sourceforge.net/p/nhapi/code/HEAD/tree/NHapi20/ ...
- loadrunner手动生成脚本函数
1.点击insert
- 启动新内核出现：Kernel panic - not syncing: Attempted to kill init! exitcode=0x00000004
转载请注明出处:http://blog.csdn.net/qq_26093511/article/details/51841281 启动新内核出现错误:Kernel panic - not synci ...
- 关于javaScript事件委托的那些事
今天是第一次写稿,还是有那么一丢丢小鸡冻...回归正题啦... 关于javaScript事件委托不得不说的那些事,为什么要使用事件委托? 我们可以这么说,假设老板要分配一项任务,首先要秘书叫A君来到办 ...
- Centos 7安装与配置chef
背景:随着DevOps 逐渐流行起来,越来越多的工作需要自动化处理,而chef就是其中一款能实现自动化管理的工具,掌握类似chef这样的自动化工具,相信会使你在未来的竞争中更具优势. 俗话说“好记性不 ...
- Learning Python 010 函数 2
Python 函数 2 函数的参数 位置参数(普通,正常的参数) 随便编写一个求x^n的值的函数power(x, n): def power(x, n): s = 1 while n > 0: ...