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读取配置文件自写
Feb 11 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
Bootstrap插件全集
Jul 18 Javascript
vue引入swiper插件的使用实例
Jul 19 Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
package.json各个属性说明详解
Mar 11 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代码的53条建议
2008/03/27 PHP
常见的PHP五种设计模式小结
2011/03/23 PHP
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
解析PHP提交后跳转
2013/06/23 PHP
PHP curl 抓取AJAX异步内容示例
2014/09/09 PHP
php中curl使用指南
2015/02/05 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
了解在JavaScript中将值转换为字符串的5种方法
2019/06/06 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
Python中使用asyncio 封装文件读写
2016/09/11 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
python验证身份证信息实例代码
2019/05/06 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
《猴子种树》教学反思
2014/02/14 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书