原生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图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...
随机推荐
- 搞事情 -- python之线程
简介 操作系统线程理论 线程概念的引入背景 线程的特点 进程和线程的关系 使用线程的实际场景 用户级线程和内核级线程(了解) 线程和python 理论知识 线程的创建Threading.Thread类 ...
- bzoj 3730 震波 —— 动态点分治+树状数组
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3730 建点分树,每个点记两个树状数组,存它作为重心管辖的范围内,所有点到它的距离情况和到它在 ...
- bzoj 2178 圆的面积并 —— 辛普森积分
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2178 先看到这篇博客:https://www.cnblogs.com/heisenberg- ...
- HDU1698(线段树入门题)
Just a Hook Time Limit:2000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Descrip ...
- 如何在windows 2003（虚拟主机）上面部署MVC3
相信有很多朋友和我一样遇到了这个问题,网上大牛说的都不是很清楚,关于这个问题我详细的跟进一下 这个问题呢大致分为两种情况 一.有服务器的控制权限,这个就简单很多, 1.安装mvc3支持组件2.如果可以 ...
- Ruby中的include
Ruby中的include语句应注意以下两个问题: 1.include与文件无关.C语言中,#include预处理指令在编译期将一个文件的内容插入到另一个文件中.Ruby语句只是简单地产生一个指向指定 ...
- 怎么查看mysql的安装目录，环境：windows+mysql+navicat
怎么查看mysql的安装目录 如果忘记了MySQL的安装目录,怎么快速找到呢?方法或许很多,作者觉得这种最方便了 环境:windows+mysql+navicat 方法:进入mysql命令行输入:sh ...
- jquery easyui 推荐博客 （MVC+EF+EasyUI+Bootstrap）
构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统(52)-美化EasyUI皮肤和图标 系列目录 我很久以前就想更新系统的皮肤功能,Easyui 自 ...
- How to Write a Spelling Corrector用java 写拼写检查器 Java实现 以备查验
import java.io.*;import java.util.*;import java.util.regex.*; class Spelling { private final HashMap ...
- Neural Networks and Deep Learning 笔记
1 Introduction to Deep Learning 介绍了神经网络的定义,有监督学习,分析了为什么深度学习会崛起 1.1 结构化数据/非结构化数据 结构化数据:有一个确切的数据库,有key ...