Javascript实现多彩雪花从天降散落效果的方法


Posted in Javascript onFebruary 02, 2015

本文实例讲述了Javascript实现多彩雪花从天降散落效果的方法。分享给大家供大家参考。具体分析如下:

先来看看运行效果,如下图所示:

Javascript实现多彩雪花从天降散落效果的方法

完整源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>Javascript多彩雪花从天降</title>

<style type="text/css">

.3waterSnow{display:block; overflow:hidden; font-size:12px; position:absolute};

body{background:#000;margin:0px}

html{overflow:hidden; background:#000;}

a{color:White;text-decoration:none}

.3waterTitle{color:red;height:140px;width:800px;margin:0px auto;text-align:center}

</style>

</head>
<body>
<script type="text/javascript">

var yanhua = "yanhua.3water.com";

var Fire = function (r, color) {

this.radius = r || 12;

this.color = color || "FF6600";

this.xpos = 0;

this.ypos = 0;

this.zpos = 0;

this.vx = 0;

this.vy = 0;

this.vz = 0;

this.mass = 1;

this.p = document.createElement("span");

this.p.className = "jb"+"51Snow";

this.p.innerHTML = "*";

this.p.style.fontSize = this.radius + "px";

this.p.style.color = "#" + this.color;

}

Fire.prototype = {

append: function (parent) {

parent.appendChild(this.p);

},

setSize: function (scale) {

this.p.style.fontSize = this.radius * scale + "px";

},

setPosition: function (x, y) {

this.p.style.left = x + "px";

this.p.style.top = y + "px";

},

setVisible: function (b) {

this.p.style.display = b ? "block" : "none";

}

}

var fireworks = function () {

var fires = new Array();

var count = 100;

var fl = 250;

var vpx = 500;

var vpy = 300;

var gravity = .3;

var floor = 200;

var bounce = -.8;

var timer;

return {

init: function () {

for (var i = 0; i < count; i++) {

var color = 0xFF0000;

color = (Math.random() * 0xFFFFFF).toString(16).toString().split(".")[0];

while (color.length < 6) {

color = "0" + color;

}

var fire = new Fire(12, color);

fires.push(fire);

fire.ypos = -100;

fire.vx = Math.random() * 6 - 3;

fire.vy = Math.random() * 6 - 3;

fire.vz = Math.random() * 6 - 3;

fire.append(document.body);

}

var that = this;

timer = setInterval(function () {

for (var i = 0; i < count; i++) {

that.move(fires[i]);

}

}, 30);

},

move: function (fire) {

fire.vy += gravity;

fire.xpos += fire.vx;

fire.ypos += fire.vy;

fire.zpos += fire.vz;

if (fire.ypos > floor) {

fire.ypos = floor;

fire.vy *= bounce;

}

if (fire.zpos > -fl) {

var scale = fl / (fl + fire.zpos);

fire.setSize(scale);

fire.setPosition(vpx + fire.xpos * scale,

vpy + fire.ypos * scale);

fire.setVisible(true);

} else {

fire.setVisible(false);

}

}

}

}

if (yanhua === 'yanhua.jb' + '51.' + 'net')

fireworks().init();
function 3waterSnow() {

window.location.reload();

} if (yanhua === 'yanhua.jb' + '51.' + 'net')

setInterval(3waterSnow, 6000);

</script>
</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
JavaScript Event学习第七章 事件属性
Feb 07 Javascript
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 Javascript
使用jQuery的attr方法来修改onclick值
Jul 07 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 Javascript
JSON 对象未定义错误的解决方法
Sep 29 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 #Javascript
JQuery动画与特效实例分析
Feb 02 #Javascript
Javascript核心读书有感之词法结构
Feb 01 #Javascript
Javascript核心读书有感之语言核心
Feb 01 #Javascript
jQuery功能函数详解
Feb 01 #Javascript
jQuery动画与特效详解
Feb 01 #Javascript
jquery制作 随机弹跳的小球特效
Feb 01 #Javascript
You might like
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
一句话JavaScript表单验证代码
2009/08/02 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
JavaScript注册时密码强度校验代码
2017/06/30 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
分析python服务器拒绝服务攻击代码
2014/01/16 Python
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
Python 绘图和可视化详细介绍
2017/02/11 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
荷兰家电销售网站:Welhof
2020/12/08 全球购物
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
机电专业体育教师求职信
2013/09/21 职场文书
思想汇报范文
2013/11/04 职场文书
优秀经理事迹材料
2014/02/01 职场文书
教师通用专业自荐书范文
2014/02/11 职场文书
应届生自荐信范文
2014/02/21 职场文书
电子商务专业求职信
2014/07/10 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android
利用Python实时获取steam特惠游戏数据
2022/06/25 Python