<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery随机点名放烟花特效 - 站长素材</title>
<style>
*{margin:0;padding:0; font-family:"微软雅黑";}
.box{
width:80vw;
margin:0 auto;
background:#EFEFEF;
position: absolute;
/*left: 0;*/
left: calc(50% - 40vw); /*水平居中*/
top: 0;
}
#name{
padding:60px;
font-size:40px;
font-weight:900;
text-align:center;
background:url(images/6.jpg) no-repeat center;
/*以盒子内的文字作为裁剪区域向外裁剪，文字之外的区域都将被裁剪掉*/
-webkit-background-clip:text;
-webkit-text-fill-color:transparent; /*文字颜色填充*/
}
h1{
letter-spacing:3px;
height:70px;
line-height:70px;
background:#ccc;
text-align:center;
-webkit-text-stroke:1px #000; /*字体描边*/
-webkit-text-fill-color:transparent;/*谷歌内核特有的属性*/
}
#bt{
height:50px;
line-height:50px;
background:deepskyblue;
text-align:center;
color:#fff;
cursor:pointer;
}
#canvas{
display:none;
}
</style>
</head>
<body id="bodyid">
<canvas id="canvas"></canvas>
<div class="box">
<h1>金榜题名</h1>
<div id="name">张三</div>
<div id="bt" onclick="doit()">开始点名</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
var canvas = $('#canvas')[0];
canvas.width = $(window).width();
canvas.height = $(window).height();
var ctx = canvas.getContext('2d');
// resize
$(window).on('resize', function() {
canvas.width = $(window).width();
canvas.height = $(window).height();
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
});
// init
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// objects
var listFire = [];
var listFirework = [];
var fireNumber = 10;
var center = { x: canvas.width / 2, y: canvas.height / 1.5 };
var range = 100;
for (var i = 0; i < fireNumber; i++) {
var fire = {
x: Math.random() * range / 2 - range / 4 + center.x,
y: Math.random() * range * 2 + canvas.height,
size: Math.random() + 0.5,
fill: '#fd1',
vx: Math.random() - 0.5,
vy: -(Math.random() + 4),
ax: Math.random() * 0.02 - 0.01,
far: Math.random() * range + (center.y - range)
};
fire.base = {
x: fire.x,
y: fire.y,
vx: fire.vx
};
//
listFire.push(fire);
}
function randColor() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var color = 'rgb($r, $g, $b)';
color = color.replace('$r', r);
color = color.replace('$g', g);
color = color.replace('$b', b);
return color;
}
(function loop() {
requestAnimationFrame(loop);
update();
draw();
})();
function update() {
for (var i = 0; i < listFire.length; i++) {
var fire = listFire[i];
//
if (fire.y <= fire.far) {
// case add firework
var color = randColor();
for (var i = 0; i < fireNumber * 5; i++) {
var firework = {
x: fire.x,
y: fire.y,
size: Math.random() + 1.5,
fill: color,
vx: Math.random() * 5 - 2.5,
vy: Math.random() * -5 + 1.5,
ay: 0.05,
alpha: 1,
life: Math.round(Math.random() * range / 2) + range / 2
};
firework.base = {
life: firework.life,
size: firework.size
};
listFirework.push(firework);
}
// reset
fire.y = fire.base.y;
fire.x = fire.base.x;
fire.vx = fire.base.vx;
fire.ax = Math.random() * 0.02 - 0.01;
}
//
fire.x += fire.vx;
fire.y += fire.vy;
fire.vx += fire.ax;
}
for (var i = listFirework.length - 1; i >= 0; i--) {
var firework = listFirework[i];
if (firework) {
firework.x += firework.vx;
firework.y += firework.vy;
firework.vy += firework.ay;
firework.alpha = firework.life / firework.base.life;
firework.size = firework.alpha * firework.base.size;
firework.alpha = firework.alpha > 0.6 ? 1 : firework.alpha;
//
firework.life--;
if (firework.life <= 0) {
listFirework.splice(i, 1);
}
}
}
}
function draw() {
// clear
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 0.18;
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// re-draw
ctx.globalCompositeOperation = 'screen';
ctx.globalAlpha = 1;
for (var i = 0; i < listFire.length; i++) {
var fire = listFire[i];
ctx.beginPath();
ctx.arc(fire.x, fire.y, fire.size, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = fire.fill;
ctx.fill();
}
for (var i = 0; i < listFirework.length; i++) {
var firework = listFirework[i];
ctx.globalAlpha = firework.alpha;
ctx.beginPath();
ctx.arc(firework.x, firework.y, firework.size, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = firework.fill;
ctx.fill();
}
}
});
//点名事件
var id = document.getElementById('canvas');
var namelist=["李四","王五","二二","一一","三三"];
var mytime=null;
function doit(){
var bt = document.getElementById("bt");
if(mytime==null)
{
bt.innerHTML = "停止点名";
bt.style.background = 'palevioletred';
id.style.display = 'none'
//随机点名
show();//定义一个方法
}else{
bt.innerHTML = "开始点名";
bt.style.background = "deepskyblue";
clearTimeout(mytime);
mytime = null;
id.style.display = 'block'
}
}
/*Math.floor 向下取整(-16.2就为-17)，去除小数*/
function show(){
var name = document.getElementById("name");
var num=Math.floor(Math.random()*namelist.length);
name.innerHTML = namelist[num];
mytime = setTimeout(show,80);
}
</script>
</body>
</html>
jQuery随机点名放烟花特效.zip （3个子文件） 
jiaoben8281 js 
jquery.min.js 94KB
index.html 6KB images 
6.jpg 8KB资源评论
码云笔记
- 粉丝: 3w+
- 资源: 5850
最新资源
- yolo算法-动物数据集-8944张图像带标签-自行车-背景-大象-豹-牛-熊-鹿-马-摩托车-猎豹-福克斯-猴子-美洲虎-太阳能电池板-老虎-犀牛-狮子-山羊-人-狗-天鱼-鸟.zip
- WordPress在线社交问答社区主题Discy V3.8.1
- 公开整理-农业科技创新数据集（2010-2022）.xlsx
- 基于Python卷积神经网络人脸识别驾驶员疲劳检测与预警系统设计毕业源码案例设计
- yolo算法-麻将数据集-2205张图像带标签-绿色-北-南方-西-白色-万-东-红色.zip
- yolo算法-麻将检测数据集-13687张图像带标签-西风.zip
- yolo算法-跌倒检测数据集-10787张图像带标签-检测到跌倒.zip
- 软考冲刺资源之软考系统架构设计师笔记一起努力吧
- delphi 读取多种格式的图像,并实现互转
- Wordpress简约大气昼夜切换导航主题模板NDNAV主题
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
