团购网站管理系统,做网站和做推广有什么区别,广州市司法职业学校,简单的企业网站制作web前端项目-七彩动态夜空烟花【附源码】
本项目仅使用了HTML#xff0c;代码简单#xff0c;实现效果绚丽#xff0c;且本项目代码直接运行即可实现#xff0c;无需图片素材#xff0c;接下来让我们一起实现一场美丽的烟花秀叭 运行效果#xff1a;鼠标点击和移动可控制…web前端项目-七彩动态夜空烟花【附源码】
本项目仅使用了HTML代码简单实现效果绚丽且本项目代码直接运行即可实现无需图片素材接下来让我们一起实现一场美丽的烟花秀叭 运行效果鼠标点击和移动可控制烟花方向烟花颜色自动变化 HTML源码
!DOCTYPE html
html dirltr langzh-CN
head
meta charsetUTF-8 /
meta nameviewport contentwidthdevice-width /
titleEnjoy fireworks/title script typetext/javascript srchttp://g.huceo.com/weixin/qw/jquery.min.js/scriptscript typetext/javascriptvar dataForWeixin {appId: gh_ff79a97cd7f3,url: http://g.huceo.com/weixin/yh/en/,title: Lonely fireworks shows, if you feel good, please share the wechat,desc: Lonely fireworks shows, if you feel good, please share the wechat};var onBridgeReady function(){WeixinJSBridge.on(menu:share:appmessage, function(argv){var infos $(#infos).text(); WeixinJSBridge.invoke(sendAppMessage, {appid: dataForWeixin.appId,img_url: dataForWeixin.TLImg,img_width: 120,img_height: 120,link: dataForWeixin.url ?fwx_hy_bb,title: infos dataForWeixin.title,desc: dataForWeixin.desc });setTimeout(function () {location.href http://g.huceo.com/weixin/yh/en/;}, 1500); });WeixinJSBridge.on(menu:share:timeline, function(argv){var infos $(#infos).text(); WeixinJSBridge.invoke(shareTimeline, {appid: dataForWeixin.appId,img_url:dataForWeixin.TLImg,img_width: 120,img_height: 120,link: dataForWeixin.url ?fwx_pyq_bb,title: infos dataForWeixin.title,desc: dataForWeixin.desc});setTimeout(function () {location.href http://g.huceo.com/weixin/yh/en/;}, 1500); });};if(document.addEventListener){document.addEventListener(WeixinJSBridgeReady, onBridgeReady, false);}else if(document.attachEvent){document.attachEvent(WeixinJSBridgeReady, onBridgeReady);document.attachEvent(onWeixinJSBridgeReady, onBridgeReady);} /script
style
body {background: #000;margin: 0;
}canvas {cursor: crosshair;display: block;
}
.STYLE1 {color: #333333}
/style
/head
div styletext-align:center;clear:both/div
canvas idcanvasspan classSTYLE1Open IE effect more perfect /span/canvas
script
window.requestAnimFrame ( function() {return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||function( callback ) {window.setTimeout( callback, 1000 / 60 );};
})();
var canvas document.getElementById( canvas ),ctx canvas.getContext( 2d ),cw window.innerWidth,ch window.innerHeight,fireworks [],particles [],hue 120,limiterTotal 5,limiterTick 0,timerTotal 80,timerTick 0,mousedown false,mx,my;
canvas.width cw;
canvas.height ch;
function random( min, max ) {return Math.random() * ( max - min ) min;
}
function calculateDistance( p1x, p1y, p2x, p2y ) {var xDistance p1x - p2x,yDistance p1y - p2y;return Math.sqrt( Math.pow( xDistance, 2 ) Math.pow( yDistance, 2 ) );
}function Firework( sx, sy, tx, ty ) {this.x sx;this.y sy;this.sx sx;this.sy sy;this.tx tx;this.ty ty;this.distanceToTarget calculateDistance( sx, sy, tx, ty );this.distanceTraveled 0;this.coordinates [];this.coordinateCount 3;while( this.coordinateCount-- ) {this.coordinates.push( [ this.x, this.y ] );}this.angle Math.atan2( ty - sy, tx - sx );this.speed 2;this.acceleration 1.05;this.brightness random( 50, 70 );this.targetRadius 1;
}
Firework.prototype.update function( index ) {this.coordinates.pop();this.coordinates.unshift( [ this.x, this.y ] );if( this.targetRadius 8 ) {this.targetRadius 0.3;} else {this.targetRadius 1;}this.speed * this.acceleration;var vx Math.cos( this.angle ) * this.speed,vy Math.sin( this.angle ) * this.speed;this.distanceTraveled calculateDistance( this.sx, this.sy, this.x vx, this.y vy );if( this.distanceTraveled this.distanceToTarget ) {createParticles( this.tx, this.ty );fireworks.splice( index, 1 );} else {this.x vx;this.y vy;}
}Firework.prototype.draw function() {ctx.beginPath();ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );ctx.lineTo( this.x, this.y );ctx.strokeStyle hsl( hue , 100%, this.brightness %);ctx.stroke();ctx.beginPath();ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );ctx.stroke();
}function Particle( x, y ) {this.x x;this.y y;this.coordinates [];this.coordinateCount 5;while( this.coordinateCount-- ) {this.coordinates.push( [ this.x, this.y ] );}this.angle random( 0, Math.PI * 2 );this.speed random( 1, 10 );this.friction 0.95;this.gravity 1;this.hue random( hue - 20, hue 20 );this.brightness random( 50, 80 );this.alpha 1;this.decay random( 0.015, 0.03 );
}Particle.prototype.update function( index ) {this.coordinates.pop();this.coordinates.unshift( [ this.x, this.y ] );this.speed * this.friction;this.x Math.cos( this.angle ) * this.speed;this.y Math.sin( this.angle ) * this.speed this.gravity;this.alpha - this.decay;if( this.alpha this.decay ) {particles.splice( index, 1 );}
}Particle.prototype.draw function() {ctx. beginPath();ctx.moveTo( this.coordinates[ this.coordinates.length - 1 ][ 0 ], this.coordinates[ this.coordinates.length - 1 ][ 1 ] );ctx.lineTo( this.x, this.y );ctx.strokeStyle hsla( this.hue , 100%, this.brightness %, this.alpha );ctx.stroke();
}function createParticles( x, y ) {var particleCount 30;while( particleCount-- ) {particles.push( new Particle( x, y ) );}
}
function loop() {requestAnimFrame( loop );hue 0.5;ctx.globalCompositeOperation destination-out;ctx.fillStyle rgba(0, 0, 0, 0.5);ctx.fillRect( 0, 0, cw, ch );ctx.globalCompositeOperation lighter;var i fireworks.length;while( i-- ) {fireworks[ i ].draw();fireworks[ i ].update( i );}var i particles.length;while( i-- ) {particles[ i ].draw();particles[ i ].update( i );}if( timerTick timerTotal ) {if( !mousedown ) {fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );timerTick 0;}} else {timerTick;}if( limiterTick limiterTotal ) {if( mousedown ) {fireworks.push( new Firework( cw / 2, ch, mx, my ) );limiterTick 0;}} else {limiterTick;}
}canvas.addEventListener( mousemove, function( e ) {mx e.pageX - canvas.offsetLeft;my e.pageY - canvas.offsetTop;
});canvas.addEventListener( mousedown, function( e ) {e.preventDefault();mousedown true;
});canvas.addEventListener( mouseup, function( e ) {e.preventDefault();mousedown false;
});window.onload loop;
/script
audio autoplayautoplay
source srchttp://www.sypeiyin.cn/Uploads/zh/News/2012071516257FJR.mp3 typeaudio/mpeg
/audio注意 本项目代码直接运行即可实现无需图片素材
