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 相关文章推荐
javaScript 判断字符串是否为数字的简单方法
Jul 25 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
Nov 17 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
Dec 05 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
基于滚动条位置判断的简单实例
Dec 14 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
node实现的爬虫功能示例
May 04 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
js实现ATM机存取款功能
Oct 27 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 jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
javascript获取以及设置光标位置
2017/02/16 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
python使用psutil模块获取系统状态
2016/08/27 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
理解python中生成器用法
2017/12/20 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
工作自我评价分享
2013/12/01 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
施工单位安全责任书
2014/07/24 职场文书
会计出纳岗位职责
2015/03/31 职场文书
民事二审代理词
2015/05/25 职场文书
任长霞观后感
2015/06/16 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫
Golang bufio详细讲解
2022/04/21 Golang
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技