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程序设计有所帮助。
相关推荐
-
下雪了 javascript实现雪花飞舞
本文实例为大家分享了雪花飞舞效果javascript实现,供大家参考,具体内容如下 原理: 1.js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果. 2.js获取创建的DIV并改变其top属性值,当下落的高度大于屏幕高后删除该移动div 3.好像不够完善勿喷 效果预览:http://wjf444128852.github.io/demo02/snow/index.html HTML代码: <!DOCTYPE html> <html lang="en&qu
-
用js代码和插件实现wordpress雪花飘落效果的四种方法
冬天到了,很多的博客空间都加了雪花的效果,于是去看了看他们的效果实现.有好几个效果代码,就拿过来了,有需要的朋友可以拿过去试试看. 雪花大图片: 效果代码一 <script type="text/javascript" language="javascript"> (function() { function k(a, b, c) { if (a.addEventListener) a.addEventListener(b, c, false); els
-
使用javascript实现雪花飘落的效果
看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈旧了,那么就学者改掉吧. 包括: 1.对left和top的操作仅支持IE浏览器,这咋行,必须得支持chrome. 2.控制图片下落的过程还要去检索element,不好吧,那就改成数组维持,直接操作数组中维持的对象,启不更快. 3.向文档中添加元素直接改成通过JS代码创建元素对象的方式. 实现思路: 1.初始化生成10个div,全都采用绝对定位
-
使用js实现雪花飘落效果
今天用html5绘布加js写的雪花飘效果 .分享下: 复制代码 代码如下: <html> <head> <script> function start(){ var array=new Array(); var canvas=document.getElementById("mycanvas"); var context=canvas.getContext("2d"); for(var i=0;i<50;i++){ var
-
js特效,页面下雪的小例子
复制代码 代码如下: if (arr[i]){ var ofs=$(this).offset(); var x=parseInt(ofs.left); var y =parseInt(ofs.top); var vy=parseInt($(this).attr("vy")); x +=wind; vy *=
-
JS实现模拟风力的雪花飘落效果
本文实例讲述了JS实现模拟风力的雪花飘落效果.分享给大家供大家参考.具体实现方法如下: <!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"> <
-
Javascript实现多彩雪花从天降散落效果的方法
本文实例讲述了Javascript实现多彩雪花从天降散落效果的方法.分享给大家供大家参考.具体分析如下: 先来看看运行效果,如下图所示: 完整源代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&qu
-
JavaScript实现文字与图片拖拽效果的方法
本文实例讲述了JavaScript实现文字与图片拖拽效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JavaScript实现文字与图片的拖拽效果</title> <style type="text/css"> *{padding:0;margin:0;} .tips{position:absolute;background:#eee;} </style
-
JavaScript实现鼠标滑过图片变换效果的方法
本文实例讲述了JavaScript实现鼠标滑过图片变换效果的方法.分享给大家供大家参考.具体如下: <html> <head> <title>Swap Images with onMouseOver and onMouseOut</title> </head> <body bgcolor="#FFFFCC" text="#3300FF"> <CENTER> <FORM NAME
-
JavaScript控制网页层收起和展开效果的方法
本文实例讲述了JavaScript控制网页层收起和展开效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <meta http-equiv="pragma" content=&q
-
JavaScript实现京东购物放大镜和选项卡效果的方法分析
本文实例讲述了JavaScript实现京东购物放大镜和选项卡效果的方法.分享给大家供大家参考,具体如下: 购物网站点击商品后,都会有一个查看物品图片,并且可以放大仔细观察物品的功能.这个功能看起来复杂,其实实现起来非常简单.下面我们来一起做这个小效果吧! 首先,我们看一下页面的布局: 1.小图片显示区,上面有一个方形遮罩层 2.缩略图横向列表 3.大图显示区域 然后,我们写出开发步骤: 1.编写3个区域的html布局,使他们位于同一个容器内 2.显示区域2的图片列表 3.给区域2的图片添加mou
-
javascript实现淘宝幻灯片广告展示效果
本文实例讲述了javascript实现淘宝幻灯片广告展示效果的方法.分享给大家供大家参考.具体如下: 一.效果图如下: 二.代码部分: JS代码部分: function getClass(oParent,name){ var arr=[]; var oBj=oParent.getElementsByTagName("*"); for(var i=0;i<oBj.length;i++){ if(oBj[i].className==name){ arr.push(oBj[i]); }
-
JS+CSS实现Li列表隔行换色效果的方法
本文实例讲述了JS+CSS实现Li列表隔行换色效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/xh
-
JavaScript实现像雪花一样的Hexaflake分形
编写如下的函数: function drawHexagon(x,y,L) { ctx.beginPath(); ctx.moveTo(x-sqrt3/2*L,y-L/2); ctx.lineTo(x-sqrt3/2*L,y+L/2); ctx.lineTo(x,y+L); ctx.lineTo(x+sqrt3/2*L,y+L/2); ctx.lineTo(x+sqrt3/2*L,y-L/2); ctx.lineTo(x,y-L); ctx.closePath(); ctx.fillStyle =
-
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">
-
JavaScript实现类似淘宝的购物车效果
前言 相信大家都很熟悉商品购物车这一功能,每当我们在某宝某东上购买商品的时候,看中了哪件商品,就会加入购物车中,最后结算.购物车这一功能,方便消费者对商品进行管理,可以添加商品,删除商品,选中购物车中的某一项或几项商品,最后商品总价也会随着消费者的操作随着变化.本文介绍的是通过JavaScript实现类似于淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能. 功能如下 1. 实现兼容低版本IE的getElementsByClassName()方法 2. JS表