原生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图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...
随机推荐
- ffmpeg用法（心得体会还有你见过的用法）
ffmpeg的常用用法很多,我这里提供的用法有可能有许多地方是你没见过的. 一.ffmpeg合并视频 我经常需要切割再把一些零碎的视频给拼接起来,这样可以省许多磁盘空间.其实用mencoder挺不错的 ...
- NYOJ-127 快速求幂，最小生成树
#include"iostream" using namespace std; int kuaisuqiumo(int a,int b,int c){ ; a = a % c; ) ...
- Mysql 排序null值 排序问题分析
mysql中null值的排序问题分析 如下表t_user: name age zhangsan 1 lisi NULL wangwu 2 www.2cto.com 执行一下sql: S ...
- uoj problem 21 缩进优化
题目: 小O是一个热爱短代码的选手.在缩代码方面,他是一位身经百战的老手.世界各地的OJ上,很多题的最短解答排行榜都有他的身影.这令他感到十分愉悦. 最近,他突然发现,很多时候自己的程序明明看起来比别 ...
- 标准模板库(STL)学习指南之map映射
转载自CSDN博客:http://blog.csdn.net/bat603/article/details/1456141 Map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关 ...
- Oracle中生成UUID
Oracle中生成跨系统的唯一识别符UUID非常方便,比生成序列还简单,直接用sys_guid()就行, 例如select sys_guid() from dual 会产生一个跟MAC地址.生成时间相 ...
- C#设计模式(11)——外观模式
一.概念 外观模式提供了一个统一的接口,用来访问子系统中的一群接口.外观定义了一个高层接口,让子系统更容易使用.使用外观模式时,我们创建了一个统一的类,用来包装子系统中一个或多个复杂的类,客户端可以直 ...
- SpringMVC 利用@ResponseBody注解返回Json时，出现406 not acceptable 错误的解决方法。
1 在RequestMapping中加入produces属性如: @RequestMap(value="/path",produces="application/json ...
- 同名项目复制,发布新项目,提示已存在该项目于webapp
来自为知笔记(Wiz)
- UI线程中非安全操作与安全操作
------------------siwuxie095 工程名:SwingUIThreadSafeTest 包名:com.siwuxie095 ...