JQuery和html+css实现鼠标点击放烟花
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5烟花燃放特效代码</title> <style>
html,body{height:100%;margin:0;padding:0}
ul,li{text-indent:0;text-decoration:none;margin:0;padding:0}
img{border:0}
body{background-color:#000;color:#999;font:100%/18px helvetica, arial, sans-serif}
canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20}
*{
margin: 0px;
padding: 0px;
}
#bg_Img{
width: 1920px;
height: 1500px;
border: 1px solid transparent;
background: url("start.gif") repeat;
text-align: center;
}
ul{
width: 5555px;
height: 200px;
}
li{
font: 120px/190px "楷体";
color: white;
text-shadow: 5px 10px 10px 10px;
list-style: none;
float: left;
display: none;
}
#text_bd{
width: 600px;
height: 200px;
border: 5px solid transparent;
margin-left: 200px;
}
#mouse_click{
margin: 0px auto;
text-align: center;
color: white;
}
</style> </head>
<body>
<div id="bg_Img">
<div id="text_bd">
<ul>
<li>O(∩_∩)O~~</li>
<li>同</li>
<li>学</li>
<li>们</li>
<li>节</li>
<li>日</li>
<li>快</li>
<li>乐</li>
<li>~~</li>
</ul>
</div>
<div id="mouse_click">鼠标点击释放烟花效果</div>
</div>
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script type="text/javascript">
var aLi=document.querySelectorAll("li");
setInterval(a,1000);
setInterval(b,2000);
setInterval(c,3000);
setInterval(d,4000);
setInterval(e,5000);
setInterval(f,6000);
setInterval(g,7000);
setInterval(h,8000);
function a() {
aLi[0].style.display = "block"
}
function b() {
aLi[1].style.display = "block"
}
function c() {
aLi[2].style.display = "block"
}
function d() {
aLi[3].style.display = "block"
}
function e() {
aLi[4].style.display = "block"
}
function f() {
aLi[5].style.display = "block"
}
function g() {
aLi[6].style.display = "block"
}
function h() {
aLi[7].style.display = "block"
}
$(function(){
var Fireworks = function(){
var self = this;
var rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);}
var hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);};
window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)}}(); self.init = function(){
self.canvas = document.createElement('canvas');
self.canvas.width = self.cw = $(window).innerWidth();
self.canvas.height = self.ch = $(window).innerHeight();
self.particles = [];
self.partCount = 150;
self.fireworks = [];
self.mx = self.cw/2;
self.my = self.ch/2;
self.currentHue = 30;
self.partSpeed = 5;
self.partSpeedVariance = 10;
self.partWind = 50;
self.partFriction = 5;
self.partGravity = 1;
self.hueMin = 0;
self.hueMax = 360;
self.fworkSpeed = 4;
self.fworkAccel = 10;
self.hueVariance = 30;
self.flickerDensity = 25;
self.showShockwave = true;
self.showTarget = false;
self.clearAlpha = 25; $(document.body).append(self.canvas);
self.ctx = self.canvas.getContext('2d');
self.ctx.lineCap = 'round';
self.ctx.lineJoin = 'round';
self.lineWidth = 1;
self.bindEvents();
self.canvasLoop(); self.canvas.onselectstart = function() {
return false;
};
}; self.createParticles = function(x,y, hue){
var countdown = self.partCount;
while(countdown--){
var newParticle = {
x: x,
y: y,
coordLast: [
{x: x, y: y},
{x: x, y: y},
{x: x, y: y}
],
angle: rand(0, 360),
speed: rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed + self.partSpeedVariance)),
friction: 1 - self.partFriction/100,
gravity: self.partGravity/2,
hue: rand(hue-self.hueVariance, hue+self.hueVariance),
brightness: rand(50, 80),
alpha: rand(40,100)/100,
decay: rand(10, 50)/1000,
wind: (rand(0, self.partWind) - (self.partWind/2))/25,
lineWidth: self.lineWidth
};
self.particles.push(newParticle);
}
}; self.updateParticles = function(){
var i = self.particles.length;
while(i--){
var p = self.particles[i];
var radians = p.angle * Math.PI / 180;
var vx = Math.cos(radians) * p.speed;
var vy = Math.sin(radians) * p.speed;
p.speed *= p.friction; p.coordLast[2].x = p.coordLast[1].x;
p.coordLast[2].y = p.coordLast[1].y;
p.coordLast[1].x = p.coordLast[0].x;
p.coordLast[1].y = p.coordLast[0].y;
p.coordLast[0].x = p.x;
p.coordLast[0].y = p.y; p.x += vx;
p.y += vy;
p.y += p.gravity; p.angle += p.wind;
p.alpha -= p.decay; if(!hitTest(0,0,self.cw,self.ch,p.x-p.radius, p.y-p.radius, p.radius*2, p.radius*2) || p.alpha < .05){
self.particles.splice(i, 1);
}
};
}; self.drawParticles = function(){
var i = self.particles.length;
while(i--){
var p = self.particles[i]; var coordRand = (rand(1,3)-1);
self.ctx.beginPath();
self.ctx.moveTo(Math.round(p.coordLast[coordRand].x), Math.round(p.coordLast[coordRand].y));
self.ctx.lineTo(Math.round(p.x), Math.round(p.y));
self.ctx.closePath();
self.ctx.strokeStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+p.alpha+')';
self.ctx.stroke(); if(self.flickerDensity > 0){
var inverseDensity = 50 - self.flickerDensity;
if(rand(0, inverseDensity) === inverseDensity){
self.ctx.beginPath();
self.ctx.arc(Math.round(p.x), Math.round(p.y), rand(p.lineWidth,p.lineWidth+3)/2, 0, Math.PI*2, false)
self.ctx.closePath();
var randAlpha = rand(50,100)/100;
self.ctx.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+randAlpha+')';
self.ctx.fill();
}
}
};
}; self.createFireworks = function(startX, startY, targetX, targetY){
var newFirework = {
x: startX,
y: startY,
startX: startX,
startY: startY,
hitX: false,
hitY: false,
coordLast: [
{x: startX, y: startY},
{x: startX, y: startY},
{x: startX, y: startY}
],
targetX: targetX,
targetY: targetY,
speed: self.fworkSpeed,
angle: Math.atan2(targetY - startY, targetX - startX),
shockwaveAngle: Math.atan2(targetY - startY, targetX - startX)+(90*(Math.PI/180)),
acceleration: self.fworkAccel/100,
hue: self.currentHue,
brightness: rand(50, 80),
alpha: rand(50,100)/100,
lineWidth: self.lineWidth
};
self.fireworks.push(newFirework); }; self.updateFireworks = function(){
var i = self.fireworks.length; while(i--){
var f = self.fireworks[i];
self.ctx.lineWidth = f.lineWidth; vx = Math.cos(f.angle) * f.speed,
vy = Math.sin(f.angle) * f.speed;
f.speed *= 1 + f.acceleration;
f.coordLast[2].x = f.coordLast[1].x;
f.coordLast[2].y = f.coordLast[1].y;
f.coordLast[1].x = f.coordLast[0].x;
f.coordLast[1].y = f.coordLast[0].y;
f.coordLast[0].x = f.x;
f.coordLast[0].y = f.y; if(f.startX >= f.targetX){
if(f.x + vx <= f.targetX){
f.x = f.targetX;
f.hitX = true;
} else {
f.x += vx;
}
} else {
if(f.x + vx >= f.targetX){
f.x = f.targetX;
f.hitX = true;
} else {
f.x += vx;
}
} if(f.startY >= f.targetY){
if(f.y + vy <= f.targetY){
f.y = f.targetY;
f.hitY = true;
} else {
f.y += vy;
}
} else {
if(f.y + vy >= f.targetY){
f.y = f.targetY;
f.hitY = true;
} else {
f.y += vy;
}
} if(f.hitX && f.hitY){
self.createParticles(f.targetX, f.targetY, f.hue);
self.fireworks.splice(i, 1); }
};
}; self.drawFireworks = function(){
var i = self.fireworks.length;
self.ctx.globalCompositeOperation = 'lighter';
while(i--){
var f = self.fireworks[i];
self.ctx.lineWidth = f.lineWidth; var coordRand = (rand(1,3)-1);
self.ctx.beginPath();
self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[coordRand].y));
self.ctx.lineTo(Math.round(f.x), Math.round(f.y));
self.ctx.closePath();
self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+f.alpha+')';
self.ctx.stroke(); if(self.showTarget){
self.ctx.save();
self.ctx.beginPath();
self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(1,8), 0, Math.PI*2, false)
self.ctx.closePath();
self.ctx.lineWidth = 1;
self.ctx.stroke();
self.ctx.restore();
} if(self.showShockwave){
self.ctx.save();
self.ctx.translate(Math.round(f.x), Math.round(f.y));
self.ctx.rotate(f.shockwaveAngle);
self.ctx.beginPath();
self.ctx.arc(0, 0, 1*(f.speed/5), 0, Math.PI, true);
self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+rand(25, 60)/100+')';
self.ctx.lineWidth = f.lineWidth;
self.ctx.stroke();
self.ctx.restore();
}
};
}; self.bindEvents = function(){
$(window).on('resize', function(){
clearTimeout(self.timeout);
self.timeout = setTimeout(function() {
self.canvas.width = self.cw = $(window).innerWidth();
self.canvas.height = self.ch = $(window).innerHeight();
self.ctx.lineCap = 'round';
self.ctx.lineJoin = 'round';
}, 100);
}); $(self.canvas).on('mousedown', function(e){
self.mx = e.pageX - self.canvas.offsetLeft;
self.my = e.pageY - self.canvas.offsetTop;
self.currentHue = rand(self.hueMin, self.hueMax);
self.createFireworks(self.cw/2, self.ch, self.mx, self.my); $(self.canvas).on('mousemove.fireworks', function(e){
self.mx = e.pageX - self.canvas.offsetLeft;
self.my = e.pageY - self.canvas.offsetTop;
self.currentHue = rand(self.hueMin, self.hueMax);
self.createFireworks(self.cw/2, self.ch, self.mx, self.my);
});
}); $(self.canvas).on('mouseup', function(e){
$(self.canvas).off('mousemove.fireworks');
}); } self.clear = function(){
self.particles = [];
self.fireworks = [];
self.ctx.clearRect(0, 0, self.cw, self.ch);
}; self.canvasLoop = function(){
requestAnimFrame(self.canvasLoop, self.canvas);
self.ctx.globalCompositeOperation = 'destination-out';
self.ctx.fillStyle = 'rgba(0,0,0,'+self.clearAlpha/100+')';
self.ctx.fillRect(0,0,self.cw,self.ch);
self.updateFireworks();
self.updateParticles();
self.drawFireworks();
self.drawParticles(); }; self.init(); }
var fworks = new Fireworks(); }); </script> </body>
</html>
广大网友们!因为这是放假的时候老师给发的!所以我也看不太懂有些东西!实在是抱歉 有什么不明白的,就留言告诉我!我去找我曾经的老师问问,虽然他已经退休好久了!!
JQuery和html+css实现鼠标点击放烟花的更多相关文章
- css禁用鼠标点击事件
css禁用鼠标点击事件 .disabled { pointer-events: none; } <div class="main-container disabled"> ...
- CSS样式鼠标点击与经过的效果一样
a:link /* 未访问的链接 */ a:visited /* 已访问的链接 */ a:hover /* 当有鼠标悬停在链接上 */ a:active /* 被选择的链接 */ a,a:visite ...
- css：鼠标点击出现有颜色的边框？如何解决
今天遇到上图这样出现有颜色的边框 解决办法: css设置属性 outline:none;
- CSS取消鼠标点击事件
pointer-events: none; 大致意思是让鼠标失去事件, 就比如我的'血小板'看板上的那个提示, 可以按F12来查看.
- CSS鼠标点击式变化图片透明度
今天分享前端代码主题:jequery控制css图片透明度 很多时候在网站图片处理上需要实现一些辅助效果,比如鼠标在图片上滑动时或点击时改变图片颜色(变灰或者其他),其实一个简单的办法就是改变图片css ...
- jQuery 二级菜单，一次显示一个小类 鼠标点击显示小类
jQuery 二级菜单,一次显示一个小类 鼠标点击显示小类 本例有另外2个关联案例,演示地址分别为2.php,3.php 演示 XML/HTML Code <div class="ar ...
- JavaScript与jQuery关于鼠标点击事件
即实现鼠标点击其中一个菜单发生样式的改变,当点击下一个菜单时,当前菜单样式改变,其他菜单均变为之前样式. 用JavaScript,jQuery都可以实现,只是后者是封装的JavaScript库,具有s ...
- 基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&quo ...
- 基于jQuery鼠标点击弹出登陆框效果
基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <input type=" ...
随机推荐
- 如何查看Centos版本
使用命令 cat /etc/centos-release 查看效果如下图 当然,你也可以查看红帽的版本 cat /etc/redhat-release 郴州软件开发培训 郴州软件培训 郴州java培训 ...
- c++11中关于`std::thread`线程传参的思考
关于std::thread线程传参的思考 最重要要记住的一点是:参数要拷贝到线程独立内存中,不管是普通类型.还是引用类型. 对于传递参数是引用类型,需要注意: 1.当指向动态变量的指针(char *) ...
- shared_ptr智能指针
来自博客:https://www.cnblogs.com/lzpong/p/6188034.html 多线程程序经常会遇到在某个线程A创建了一个对象,这个对象需要在线程B使用, 在没有shared_p ...
- Flask (五) RESTful API
RESTful API 什么是REST 一种软件架构风格.设计风格.而不是标准,只是提供了一组设计原则和约束条件.它主要用户客户端和服务器交互类的软件.基于这个风格设计的软件可以更简洁,更有层次,更易 ...
- Ibatis批量处理
1.插入 <insert id="insTable" resultClass="int"> INSERT INTO [dbo].[table] ([ ...
- KM算法（运用篇）
传送门:KM算法---理解篇 最佳匹配 什么是完美匹配 如果一个二分图,X部和Y部的顶点数相等,若存在一个匹配包含X部与Y部的所有顶点,则称为完美匹配. 换句话说:若二分图X部的每一个顶点都与Y中的一 ...
- PIE SDK小波变换
1.算法功能简介 小波变换是一种信号的时间——尺度分析方法,具有多分辨率分析的特点,而且在时频两域都具有表征信号局部特征的能力,是一种窗口大小固定不变但其形状可变,时间窗和频率窗都可变的时频局部化分析 ...
- springboot+Druid+oracle 配置p6spy
p6spy可以将带参数的sql直接打出来方便调试. 1.gradle中引入 compile group: 'p6spy', name: 'p6spy', version: '3.8.1' 2.reso ...
- iView 初识
iView和element-UI在table这块有有相似之处,但是与layui有不同的地方 在data数据这里有明显的不同,在iView中data数组下每个元素对象对应一行的数据:而layui中,da ...
- lnmp 一键搭建脚本
转载注明出处!!!!!!!!! 不足之处望多多指教. 不明之处站内私. #!/bin/bash #################################################### ...