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

 更新时间:2015年02月02日 09:51:59   转载 作者:柯乐义  
这篇文章主要介绍了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">
.jb51Snow{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}
.jb51Title{color:red;height:140px;width:800px;margin:0px auto;text-align:center}
</style>
</head>

<body>

<script type="text/javascript">
var yanhua = "yanhua.jb51.net";
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 jb51Snow() {
window.location.reload();
} if (yanhua === 'yanhua.jb' + '51.' + 'net')
setInterval(jb51Snow, 6000);
</script>

</body>
</html>

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

相关文章

  • JS实现物体带缓冲的间歇运动效果示例

    JS实现物体带缓冲的间歇运动效果示例

    这篇文章主要介绍了JS实现物体带缓冲的间歇运动效果,可实现物体定时间歇运动的功能,涉及javascript定时器、数学运算及页面元素动态修改的相关操作技巧,需要的朋友可以参考下
    2016-12-12
  • JS锚点的设置与使用方法

    JS锚点的设置与使用方法

    这篇文章主要介绍了JS锚点的设置与使用方法,涉及javascript针对页面元素属性的简单动态操作技巧,需要的朋友可以参考下
    2016-09-09
  • Mac系统下Webstorm快捷键整理大全

    Mac系统下Webstorm快捷键整理大全

    webstorm应该是目前最强的js编辑器了,结合sublime text可以很效率的开发项目。下面这篇文章主要给大家整理了一些Mac系统下Webstorm快捷键的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-05-05
  • iphone safari不支持position fixed的解决方法

    iphone safari不支持position fixed的解决方法

    最近一直在做移动web开发,开发过程中遇到了许多问题,mobile safari不支持position: fixed就是一件很头疼的事情
    2012-05-05
  • 一个支持ff的modaldialog的js代码

    一个支持ff的modaldialog的js代码

    一个支持ff的modaldialog的js代码...
    2007-03-03
  • 使用Xcache缓存器加速PHP网站的配置方法

    使用Xcache缓存器加速PHP网站的配置方法

    由于国内网站备案比较麻烦,所以笔者便把网站放到了香港。虽然网站免去了备案的困扰,但是从访问速度上来看,一般要比放于国内的网站慢2-3倍,所以便想办法对网站做了一些简单的优化,比如使用缓存系统来提升网站页面访问速度
    2017-04-04
  • 20行JS代码实现粘贴板复制功能

    20行JS代码实现粘贴板复制功能

    本文给大家分析20行JS代码实现粘贴板功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-02-02
  • JS实现深度优先搜索求解两点间最短路径

    JS实现深度优先搜索求解两点间最短路径

    这篇文章主要为大家详细介绍了JS实现深度优先搜索求解两点间最短路径,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-01-01
  • 微信小程序模板和模块化用法实例分析

    微信小程序模板和模块化用法实例分析

    这篇文章主要介绍了微信小程序模板和模块化用法,结合实例形式分析了微信小程序中的模板与模块化概念与简单使用技巧,需要的朋友可以参考下
    2017-11-11
  • nodejs 后缀名判断限制代码

    nodejs 后缀名判断限制代码

    如一个文件上传功能,需要对上传文件进行文件格式限制。我们通常会使用后缀名做限制。
    2011-03-03

最新评论