博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
原生JS实现雪花特效
阅读量:5301 次
发布时间:2019-06-14

本文共 581 字,大约阅读时间需要 1 分钟。

今天在校园招聘上被问到的问题,用JS写出雪花的效果。我打算使用多种方法来试试如何实现雪花。

这是目前按照网上某种思路模仿的第一种雪花,不太好看,但是大致意思清楚。

思路1:该思路直接由JS实现。

  • 雪花对象的定时创建 + 雪花对象的下落方法(包含消失判定)
  • 雪花创建的位置和雪花形状的建立 + 雪花的速度和雪花可能的左右移动和消失

缺点:

  • 不好看
  • 兼容性
  • 雪花方法不好,需要实时检索元素,应该改用数组维持
    
Document

思路2:该思路由JS和CSS3共同实现。

  • 雪花对象的创建 + 雪花的方法
  • 用CSS3完善雪花的渐隐和出现动画 + 雪花固定的top值增加

缺点:

  • 依旧没有用数组来维持,比较占内存
  • 不够好看
  • 兼容性
    
Document

思路3:使用数组维持雪花对象,在一开始的时候便随机创建好每个雪花的动态属性

原型模式创建的雪花对象 + 雪花方法

优点:数组维持

缺点:

  • 没有用上 window.requestAnimationFrame方法
  
mySnow- oH!!!Sexy!

思路4: 使用canvas来实现雪花特效

待更...

转载于:https://www.cnblogs.com/can-i-do/p/6867826.html

你可能感兴趣的文章
vagrant命令
查看>>
5. 文件上传下载 与 db数据库
查看>>
Orcale安装完成后 em管理、性能无法登陆 报:没有找到主机
查看>>
k-d树
查看>>
jquery.each()
查看>>
常用tab切换
查看>>
[洛谷1402]酒店之王 题解
查看>>
CCFlow中通过excel向Dtl明细表(从表)导入数据的操作说明
查看>>
根据当前时间计算上月月初到月末
查看>>
【Java并发系列】----JUC之Lock
查看>>
Django之锁,事物,Ajax
查看>>
Redis的学习笔记
查看>>
PMP备考
查看>>
Python3 高阶函数
查看>>
c语言入门-02-第一个c程序开始
查看>>
iOS常用宏定义--实用
查看>>
关于gitlab搭建方法的几点补充
查看>>
初始面向对象
查看>>
<松本行弘的程序世界> 读书笔记
查看>>
jQuery 效果
查看>>