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 相关文章推荐
JS图片无缝滚动(简单利于使用)
Jun 17 Javascript
图标线性回归斜着移动到指定的位置
Aug 16 Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
微信WeixinJSBridge API使用实例
May 25 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
JS非空验证及邮箱验证的实例
Aug 11 Javascript
JavaScript模块详解
Dec 18 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 12 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
2019十大人气国漫
2020/03/13 国漫
Snoopy类使用小例子
2008/04/15 PHP
javascript vvorld 在线加密破解方法
2008/11/13 Javascript
js获取height和width的方法说明
2013/01/06 Javascript
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
javascript获取以及设置光标位置
2017/02/16 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
2020/01/26 Javascript
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
Python translator使用实例
2008/09/06 Python
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
Python实现分割文件及合并文件的方法
2015/07/10 Python
Python制作简单的网页爬虫
2015/11/22 Python
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
Django项目中包含多个应用时对url的配置方法
2018/05/30 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
python中open函数的基本用法示例
2019/09/07 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
投资建议书模板
2014/05/12 职场文书
英文演讲稿
2014/05/15 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
小学中等生评语
2014/12/29 职场文书
详解Python描述符的工作原理
2021/06/11 Python
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android