原生js实现雪花飘落效果
雪花飘落的效果实现步骤:1.使用setInterval定时器每800毫秒创建一个雪花;2.把每一个雪花作为参数传进动态下落的方法中即可。
<style>
*{padding: 0;margin: 0;}
body{
background:#000;
width: 100%;
height: 100%;
overflow:hidden;
}
</style>
<div id="flame"></div>
js实现代码:
<script> function Obj(){} //创建一个对象 /*为这个对象添加一个具有一个参数的原型方法*/
Obj.prototype.draw=function(o){
var speed=0; //雪花每次下落的数值(10px)
var startPosLeft=Math.ceil(Math.random()*document.documentElement.clientWidth);//设置雪花随机的开始x值的大小
o.style.opacity=(Math.ceil(Math.random()*3)+7)/10; //设置透明度
o.style.left=startPosLeft+'px';
o.style.color="#fff";
o.style.fontSize=12+Math.ceil(Math.random()*14)+'px';
setInterval(function(){
//雪花下落的top值小鱼屏幕的可视区域高时执行下列
if(speed<document.documentElement.clientHeight){
o.style.top=speed+'px';
o.style.left=startPosLeft+Math.ceil(Math.random()*8)+'px';
speed+=10;
}
else{
o.style.display='none';
}
},400);
} var flame=document.getElementById('flame'); /*使用setInterval定时器每800毫秒创建一个雪花*/
setInterval(function(){
var odiv=document.createElement('div'); //创建div
odiv.innerHTML="✽"; //div的内容
odiv.style.position='absolute'; //div的绝对定位
flame.appendChild(odiv); //把创建好的div放进flame中
var obj=new Obj(); //创建函数
obj.draw(odiv); //执行obj的draw方法
},800); </script>
效果图如下:
这样雪花飘落的效果就做好了。有什么不足的地方请指正!
原生js实现雪花飘落效果的更多相关文章
- js实现雪花飘落效果的代码
使用js实现雪花飘落的效果,用html5绘布加js写的雪花飘效果 . 代码: <html> <head> <script> /** * js与html5实现的雪花飘 ...
- 简单说 JavaScript实现雪花飘落效果
说明 这次实现的雪花飘落的效果很简单,主要是为了练习练习JavaScript中的定时器,setTimeout 和 setInterval. 效果图 解释setTimeout() setTimeout函 ...
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- 面向对象原生js幻灯片代淡出效果
面向对象原生js幻灯片代淡出效果 下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
- 原生js实现的放大镜效果
这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...
- jq与原生js实现收起展开效果
jq与原生js实现收起展开效果 (jq需自己加载) <!DOCTYPE html> <html> <head> <meta charset="UTF ...
- 【OpenGL】Shader实例分析(七)- 雪花飘落效果
转发请保持地址:http://blog.csdn.net/stalendp/article/details/40624603 研究了一个雪花飘落效果.感觉挺不错的.分享给大家,效果例如以下: 代码例如 ...
- js之雪花飘落
有很多网站都有雪花或花瓣飘落的特效,看上去很好看.我来用js实现这个效果. 在写代码之前可以先引入bass.css对样式做下处理: 1.html部分 先建一个文件夹,在body中插入如下代码 < ...
- 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...
随机推荐
- YY的GCD 数学
题目描述 神犇YY虐完数论后给傻×kAc出了一题 给定N, M,求1<=x<=N, 1<=y<=M且gcd(x, y)为质数的(x, y)有多少对 kAc这种傻×必然不会了,于 ...
- web 服务器安全防范
apache 关闭目录 配置文件:安装目录/Apache/conf/httpd.conf <Directory /> #默认就会把/ 的目录暴漏出来:关闭方法: Options -Inde ...
- CodeChef - NWAYS 组合数 朱世杰恒等式
这道题目数据有坑,白浪费一个小时! 题意:求\(\sum_{i=1}^n\sum_{j=1}^n{|i-j|+k \choose k}\) 知识点: 朱世杰恒等式,\(\sum_{i=r}^n{i \ ...
- [转] node.js如何获取时间戳与时间差
[From] http://www.jb51.net/article/89767.htm Nodejs中获取时间戳的方法有很多种,例如: 1.new Date().getTime() 2.Date. ...
- Linux下Tomcat启动报 The BASEDIR environment variable is not defined
今天是2017年2月27.在Linux下部署Tomcat官网下载的Tomcat 8.5,结果启动startup.sh报如下错,即使只是跑version.sh也报同样的错. $ ./version.sh ...
- 关于jstl taglib的错误 Can not find the tag library descriptor for “http://java.sun.com/jstl/core”
在查了N个帖子之后,决定记录一下关于jstl taglib的配置方法. 首先我遇到的错误是: Can not find the tag library descriptor for "htt ...
- 2019.3.26 SQL语句(进阶3)
表的联查 员工表与部门表 员工表:id,姓名,年龄,部门id 部门表:部门id,部门名,部门成立时间,部门领导,部门职责.... 表和表之间的关系 一对一 一对多 多对多 创建联查 创建表 先创建被依 ...
- python time,random,os,sys,序列化模块
一.time模块 表示时间的三种方式 在Python中,通常有这三种方式来表示时间:时间戳.元组(struct_time).格式化的时间字符串: (1)时间戳(timestamp) :通常来说,时间戳 ...
- redis源码搭建以及配置主从服务器
2018-10-25 关闭防火墙: systemctl stop firewalld.service #停止firewall systemctl disable firewalld.service # ...
- java Collection中的排序问题
java Collection中的排序问题 这里讨论list.set.map的排序,包括按照map的value进行排序. 1)list排序 list排序可以直接采用Collections的sort方法 ...