JQuery and html+css implement mouse click to set off fireworks-JS Tutorial-php.cn

4 HTML5 fireworks special effects code</ title> 5 6 <"/><meta property="og:local" content="faq"> <meta property="og:title" content="JQuery and html+css implement mouse click to set off fireworks-JS Tutorial-php.cn"> <meta property="og:description" content="1 <!DOCTYPE html> 2 <html> 3 <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 <title>HTML5 fireworks special effects code</ title> 5 6 <"> <meta property="og:url" content="https://m.php.cn/faq/369620.html"> <meta property="og:image" content="https://m.php.cn/static/images/logo.png"> <meta property="og:site_name" content="php.cn"> <meta property="og:type" content="website"> <link rel="canonical" href="http://www.php.cn/faq/369620.html"/> <link rel="alternate" hrefLang="zh-cn" href="https://m.php.cn/zh/faq/369620.html" /> <link rel="alternate" hrefLang="en" href="https://m.php.cn/faq/369620.html" /> <link rel="alternate" hrefLang="zh-tw" href="https://m.php.cn/zh-tw/faq/369620.html" /> <link rel="alternate" hrefLang="ja" href="https://m.php.cn/ja/faq/369620.html" /> <link rel="alternate" hrefLang="ko" href="https://m.php.cn/ko/faq/369620.html" /> <link rel="alternate" hrefLang="ms" href="https://m.php.cn/ms/faq/369620.html" /> <link rel="alternate" hrefLang="fr" href="https://m.php.cn/fr/faq/369620.html" /> <link rel="alternate" hrefLang="de" href="https://m.php.cn/de/faq/369620.html" /> <meta charset="utf-8" /><meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"><meta name="applicable-device" content="mobile" /><link rel="stylesheet" href="/static/css/style.css?4.5.31"><link href="/static/front/mobcss/newphpcommon.css?1.1" type="text/css" rel="stylesheet"/><link href="/static/front/mobcss/swiper.min.css" type="text/css" rel="stylesheet"/><link href="/static/front/mobcss/newphp.css?1.2" type="text/css" rel="stylesheet"/><link href="/static/css/global.css" type="text/css" rel="stylesheet"/><link href="/static/layui/css/layui.css" type="text/css" rel="stylesheet"/><link href="/static/mobcss/mobindex3.css" type="text/css" rel="stylesheet"/><script src="/static/front/mobjs/jquery-1.6.1.min.js"></script><script src="/static/front/mobjs/swiper.min.js"></script><script src="/static/front/mobjs/newphpcommon.js"></script><link rel="canonical" href="http://www.php.cn/faq/369620.html"/> <link rel="alternate" hrefLang="zh-cn" href="https://m.php.cn/zh/faq/369620.html" /> <link rel="alternate" hrefLang="en" href="https://m.php.cn/faq/369620.html" /> <link rel="alternate" hrefLang="zh-tw" href="https://m.php.cn/zh-tw/faq/369620.html" /> <link rel="alternate" hrefLang="ja" href="https://m.php.cn/ja/faq/369620.html" /> <link rel="alternate" hrefLang="ko" href="https://m.php.cn/ko/faq/369620.html" /> <link rel="alternate" hrefLang="ms" href="https://m.php.cn/ms/faq/369620.html" /> <link rel="alternate" hrefLang="fr" href="https://m.php.cn/fr/faq/369620.html" /> <link rel="alternate" hrefLang="de" href="https://m.php.cn/de/faq/369620.html" /> <script> var canshu = { SeeMore:'See more', FoldUp:'Fold up', Choice:'LANGUAGE', wait:'Loading, please wait~', LoginFirst:"Please log in first", needKeyword:'Enter keyword search', emailPhoneError:'Please enter the correct phone or email address', missPwd:'Please enter the password', emailError:'Please enter your correct email address', VerCode:"Please enter the verification code", getCode:'Sending', pwdError:'Incorrect password format', TwoPassNotMatch:'Two passwords do not match', Bindemail:'Bind email', resetpassword:'reset password', ConfirmPass:'Confirm Password', pwdCheck:'Please enter 6-18 letters or numbers', Editinfor: 'Edit personal information', trimContent:'Please enter content', titleCheck:'Title should be at least 5 words long', choiceLang:'Please select a language classification', Secondreply:'reply', NetWorkError:'Network error, please try again later!', keywordSearch:'Enter keyword search', all_lang_string:'zh|en|zh-tw|ja|ko|ms|fr|de', Next:'Next', Previous:'Previous' }; </script><script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl; f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-WWVXRJPW'); </script><script async src="https://www.googletagmanager.com/gtag/js?id=G-H42EVCYBJC"></script><script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-H42EVCYBJC'); </script><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5902227090019525" crossorigin="anonymous"></script><meta property="article:author" content="PHP中文网" /><meta property="article:published_first" content=",https://www.php.cn/faq/369620.html" /><link rel="stylesheet" href="/static/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css?1"><link rel="stylesheet" href="/static/ueditor/third-party/SyntaxHighlighter/shCoreDefault1.css"><link href="/static/mobcss/newphp.css" type="text/css" rel="stylesheet"/><script src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js"></script><script> var xnb_name = 'Virtual currency'; </script><script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"Article","headline":"JQuery and html+css implement mouse click to set off fireworks","description":"1 <!DOCTYPE html> 2 <html> 3 <head><meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\"> 4 <title>HTML5 fireworks special effects code<\/ title> 5 6 <","datePublished":"2017-06-20T09:36:00+8:00","author":{"url":"http:\/\/m.php.cn\/member\/1.html","name":"PHP中文网"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/m.php.cn\/faq\/369620.html"},"url":"https:\/\/m.php.cn\/faq\/369620.html","articleBody":"<div class=\"cnblogs_code\">\n<pre> 1<\/span> <!DOCTYPE html>\n 2<\/span> <html>\n 3<\/span> <head><meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\n 4<\/span> <title>HTML5烟花燃放特效代码<\/title>\n 5<\/span> \n 6<\/span> <style>\n 7<\/span> html,body{height:100%;margin:0;padding:0}\n<\/span> 8<\/span> ul,li{text-indent:0;text-decoration:none;margin:0;padding:0}\n<\/span> 9<\/span> img{border:0}\n<\/span> 10<\/span> body{background-color:#000;color:#999;font:100%\/18px helvetica, arial, sans-serif}\n 11<\/span> canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20}\n<\/span> 12<\/span> *{\n<\/span> 13<\/span> margin: 0px;\n<\/span> 14<\/span> padding: 0px;\n<\/span> 15<\/span> }\n<\/span> 16<\/span> #bg_Img{\n<\/span> 17<\/span> width: 1920px;\n<\/span> 18<\/span> height: 1500px;\n<\/span> 19<\/span> border: 1px solid transparent;\n<\/span> 20<\/span> background: url(\"start.gif\") repeat;\n<\/span> 21<\/span> text-align: center;\n<\/span> 22<\/span> }\n<\/span> 23<\/span> ul{\n<\/span> 24<\/span> width: 5555px;\n<\/span> 25<\/span> height: 200px;\n<\/span> 26<\/span> }\n<\/span> 27<\/span> li{\n<\/span> 28<\/span> font: 120px\/190px \"楷体\";\n 29<\/span> color: white;\n<\/span> 30<\/span> text-shadow: 5px 10px 10px 10px;\n<\/span> 31<\/span> list-style: none;\n<\/span> 32<\/span> float<\/span>: left;\n<\/span> 33<\/span> display: none;\n<\/span> 34<\/span> }\n<\/span> 35<\/span> #text_bd{\n<\/span> 36<\/span> width: 600px;\n<\/span> 37<\/span> height: 200px;\n<\/span> 38<\/span> border: 5px solid transparent;\n<\/span> 39<\/span> margin-left: 200px;\n<\/span> 40<\/span> }\n<\/span> 41<\/span> #mouse_click{\n<\/span> 42<\/span> margin: 0px auto;\n<\/span> 43<\/span> text-align: center;\n<\/span> 44<\/span> color: white;\n<\/span> 45<\/span> }\n<\/span> 46<\/span> <\/style>\n 47<\/span> \n 48<\/span> <\/head>\n 49<\/span> <body>\n 50<\/span> <div id=\"bg_Img\">\n 51<\/span> <div id=\"text_bd\">\n 52<\/span> <ul>\n 53<\/span> <li>O(∩_∩)O~~<\/li>\n 54<\/span> <li>同<\/li>\n 55<\/span> <li>学<\/li>\n 56<\/span> <li>们<\/li>\n 57<\/span> <li>节<\/li>\n 58<\/span> <li>日<\/li>\n 59<\/span> <li>快<\/li>\n 60<\/span> <li>乐<\/li>\n 61<\/span> <li>~~<\/li>\n 62<\/span> <\/ul>\n 63<\/span> <\/div>\n 64<\/span> <div id=\"mouse_click\">鼠标点击释放烟花效果<\/div>\n 65<\/span> <\/div>\n 66<\/span> <script type=\"text\/javascript\" src=\"jquery-3.1.1.js\"><\/script>\n 67<\/span> <script type=\"text\/javascript\">\n 68<\/span> var<\/span> aLi=document.querySelectorAll(\"li\");\n<\/span> 69<\/span> setInterval(a,1000);\n<\/span> 70<\/span> setInterval(b,2000);\n<\/span> 71<\/span> setInterval(c,3000);\n<\/span> 72<\/span> setInterval(d,4000);\n<\/span> 73<\/span> setInterval(e,5000);\n<\/span> 74<\/span> setInterval(f,6000);\n<\/span> 75<\/span> setInterval(g,7000);\n<\/span> 76<\/span> setInterval(h,8000);\n<\/span> 77<\/span> function<\/span> a() {\n<\/span> 78<\/span> aLi[0].style.display = \"block\"\n 79<\/span> }\n<\/span> 80<\/span> function<\/span> b() {\n<\/span> 81<\/span> aLi[1].style.display = \"block\"\n 82<\/span> }\n<\/span> 83<\/span> function<\/span> c() {\n<\/span> 84<\/span> aLi[2].style.display = \"block\"\n 85<\/span> }\n<\/span> 86<\/span> function<\/span> d() {\n<\/span> 87<\/span> aLi[3].style.display = \"block\"\n 88<\/span> }\n<\/span> 89<\/span> function<\/span> e() {\n<\/span> 90<\/span> aLi[4].style.display = \"block\"\n 91<\/span> }\n<\/span> 92<\/span> function<\/span> f() {\n<\/span> 93<\/span> aLi[5].style.display = \"block\"\n 94<\/span> }\n<\/span> 95<\/span> function<\/span> g() {\n<\/span> 96<\/span> aLi[6].style.display = \"block\"\n 97<\/span> }\n<\/span> 98<\/span> function<\/span> h() {\n<\/span> 99<\/span> aLi[7].style.display = \"block\"\n100<\/span> }\n<\/span>101<\/span> $(function<\/span>(){\n<\/span>102<\/span> var<\/span> Fireworks = function<\/span>(){\n<\/span>103<\/span> var<\/span> self = this<\/span>;\n<\/span>104<\/span> var<\/span> rand = function<\/span>(rMi, rMa){return<\/span> ~~((Math.random()*(rMa-rMi+1))+rMi);}\n<\/span>105<\/span> var<\/span> hitTest = function<\/span>(x1, y1, w1, h1, x2, y2, w2, h2){return<\/span> !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);};\n<\/span>106<\/span> window.requestAnimFrame=function<\/span>(){return<\/span> window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function<\/span>(a){window.setTimeout(a,1E3\/60)}}();\n107<\/span> \n108<\/span> self.init = function<\/span>(){\n<\/span>109<\/span> self.canvas = document.createElement('canvas');\n<\/span>110<\/span> self.canvas.width = self.cw = $(window).innerWidth();\n<\/span>111<\/span> self.canvas.height = self.ch = $(window).innerHeight();\n<\/span>112<\/span> self.particles = [];\n<\/span>113<\/span> self.partCount = 150;\n<\/span>114<\/span> self.fireworks = [];\n<\/span>115<\/span> self.mx = self.cw\/2;\n116<\/span> self.my = self.ch\/2;\n117<\/span> self.currentHue = 30;\n<\/span>118<\/span> self.partSpeed = 5;\n<\/span>119<\/span> self.partSpeedVariance = 10;\n<\/span>120<\/span> self.partWind = 50;\n<\/span>121<\/span> self.partFriction = 5;\n<\/span>122<\/span> self.partGravity = 1;\n<\/span>123<\/span> self.hueMin = 0;\n<\/span>124<\/span> self.hueMax = 360;\n<\/span>125<\/span> self.fworkSpeed = 4;\n<\/span>126<\/span> self.fworkAccel = 10;\n<\/span>127<\/span> self.hueVariance = 30;\n<\/span>128<\/span> self.flickerDensity = 25;\n<\/span>129<\/span> self.showShockwave = true<\/span>;\n<\/span>130<\/span> self.showTarget = false<\/span>;\n<\/span>131<\/span> self.clearAlpha = 25;\n<\/span>132<\/span> \n133<\/span> $(document.body).append(self.canvas);\n<\/span>134<\/span> self.ctx = self.canvas.getContext('2d');\n<\/span>135<\/span> self.ctx.lineCap = 'round';\n<\/span>136<\/span> self.ctx.lineJoin = 'round';\n<\/span>137<\/span> self.lineWidth = 1;\n<\/span>138<\/span> self.bindEvents();\n<\/span>139<\/span> self.canvasLoop();\n<\/span>140<\/span> \n141<\/span> self.canvas.onselectstart = function<\/span>() {\n<\/span>142<\/span> return<\/span> false<\/span>;\n<\/span>143<\/span> };\n<\/span>144<\/span> };\n<\/span>145<\/span> \n146<\/span> self.createParticles = function<\/span>(x,y, hue){\n<\/span>147<\/span> var<\/span> countdown = self.partCount;\n<\/span>148<\/span> while<\/span>(countdown--){\n<\/span>149<\/span> var<\/span> newParticle = {\n<\/span>150<\/span> x: x,\n<\/span>151<\/span> y: y,\n<\/span>152<\/span> coordLast: [\n<\/span>153<\/span> {x: x, y: y},\n<\/span>154<\/span> {x: x, y: y},\n<\/span>155<\/span> {x: x, y: y}\n<\/span>156<\/span> ],\n<\/span>157<\/span> angle: rand(0, 360),\n<\/span>158<\/span> speed: rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed + self.partSpeedVariance)),\n<\/span>159<\/span> friction: 1 - self.partFriction\/100,\n160<\/span> gravity: self.partGravity\/2,\n161<\/span> hue: rand(hue-self.hueVariance, hue+self.hueVariance),\n<\/span>162<\/span> brightness: rand(50, 80),\n<\/span>163<\/span> alpha: rand(40,100)\/100,\n164<\/span> decay: rand(10, 50)\/1000,\n165<\/span> wind: (rand(0, self.partWind) - (self.partWind\/2))\/25,\n<\/span>166<\/span> lineWidth: self.lineWidth\n<\/span>167<\/span> };\n<\/span>168<\/span> self.particles.push(newParticle);\n<\/span>169<\/span> }\n<\/span>170<\/span> };\n<\/span>171<\/span> \n172<\/span> \n173<\/span> self.updateParticles = function<\/span>(){\n<\/span>174<\/span> var<\/span> i = self.particles.length;\n<\/span>175<\/span> while<\/span>(i--){\n<\/span>176<\/span> var<\/span> p = self.particles[i];\n<\/span>177<\/span> var<\/span> radians = p.angle * Math.PI \/ 180;\n<\/span>178<\/span> var<\/span> vx = Math.cos(radians) * p.speed;\n<\/span>179<\/span> var<\/span> vy = Math.sin(radians) * p.speed;\n<\/span>180<\/span> p.speed *= p.friction;\n<\/span>181<\/span> \n182<\/span> p.coordLast[2].x = p.coordLast[1].x;\n<\/span>183<\/span> p.coordLast[2].y = p.coordLast[1].y;\n<\/span>184<\/span> p.coordLast[1].x = p.coordLast[0].x;\n<\/span>185<\/span> p.coordLast[1].y = p.coordLast[0].y;\n<\/span>186<\/span> p.coordLast[0].x = p.x;\n<\/span>187<\/span> p.coordLast[0].y = p.y;\n<\/span>188<\/span> \n189<\/span> p.x += vx;\n<\/span>190<\/span> p.y += vy;\n<\/span>191<\/span> p.y += p.gravity;\n<\/span>192<\/span> \n193<\/span> p.angle += p.wind;\n<\/span>194<\/span> p.alpha -= p.decay;\n<\/span>195<\/span> \n196<\/span> if<\/span>(!hitTest(0,0,self.cw,self.ch,p.x-p.radius, p.y-p.radius, p.radius*2, p.radius*2) || p.alpha < .05){\n<\/span>197<\/span> self.particles.splice(i, 1);\n<\/span>198<\/span> }\n<\/span>199<\/span> };\n<\/span>200<\/span> };\n<\/span>201<\/span> \n202<\/span> self.drawParticles = function<\/span>(){\n<\/span>203<\/span> var<\/span> i = self.particles.length;\n<\/span>204<\/span> while<\/span>(i--){\n<\/span>205<\/span> var<\/span> p = self.particles[i];\n<\/span>206<\/span> \n207<\/span> var<\/span> coordRand = (rand(1,3)-1);\n<\/span>208<\/span> self.ctx.beginPath();\n<\/span>209<\/span> self.ctx.moveTo(Math.round(p.coordLast[coordRand].x), Math.round(p.coordLast[coordRand].y));\n<\/span>210<\/span> self.ctx.lineTo(Math.round(p.x), Math.round(p.y));\n<\/span>211<\/span> self.ctx.closePath();\n<\/span>212<\/span> self.ctx.strokeStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+p.alpha+')';\n<\/span>213<\/span> self.ctx.stroke();\n<\/span>214<\/span> \n215<\/span> if<\/span>(self.flickerDensity > 0){\n<\/span>216<\/span> var<\/span> inverseDensity = 50 - self.flickerDensity;\n<\/span>217<\/span> if<\/span>(rand(0, inverseDensity) === inverseDensity){\n<\/span>218<\/span> self.ctx.beginPath();\n<\/span>219<\/span> self.ctx.arc(Math.round(p.x), Math.round(p.y), rand(p.lineWidth,p.lineWidth+3)\/2, 0, Math.PI*2, false)\n220<\/span> self.ctx.closePath();\n<\/span>221<\/span> var<\/span> randAlpha = rand(50,100)\/100;\n222<\/span> self.ctx.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+randAlpha+')';\n<\/span>223<\/span> self.ctx.fill();\n<\/span>224<\/span> }\n<\/span>225<\/span> }\n<\/span>226<\/span> };\n<\/span>227<\/span> };\n<\/span>228<\/span> \n229<\/span> \n230<\/span> self.createFireworks = function<\/span>(startX, startY, targetX, targetY){\n<\/span>231<\/span> var<\/span> newFirework = {\n<\/span>232<\/span> x: startX,\n<\/span>233<\/span> y: startY,\n<\/span>234<\/span> startX: startX,\n<\/span>235<\/span> startY: startY,\n<\/span>236<\/span> hitX: false<\/span>,\n<\/span>237<\/span> hitY: false<\/span>,\n<\/span>238<\/span> coordLast: [\n<\/span>239<\/span> {x: startX, y: startY},\n<\/span>240<\/span> {x: startX, y: startY},\n<\/span>241<\/span> {x: startX, y: startY}\n<\/span>242<\/span> ],\n<\/span>243<\/span> targetX: targetX,\n<\/span>244<\/span> targetY: targetY,\n<\/span>245<\/span> speed: self.fworkSpeed,\n<\/span>246<\/span> angle: Math.atan2(targetY - startY, targetX - startX),\n<\/span>247<\/span> shockwaveAngle: Math.atan2(targetY - startY, targetX - startX)+(90*(Math.PI\/180)),\n248<\/span> acceleration: self.fworkAccel\/100,\n249<\/span> hue: self.currentHue,\n<\/span>250<\/span> brightness: rand(50, 80),\n<\/span>251<\/span> alpha: rand(50,100)\/100,\n252<\/span> lineWidth: self.lineWidth\n<\/span>253<\/span> };\n<\/span>254<\/span> self.fireworks.push(newFirework);\n<\/span>255<\/span> \n256<\/span> };\n<\/span>257<\/span> \n258<\/span> \n259<\/span> self.updateFireworks = function<\/span>(){\n<\/span>260<\/span> var<\/span> i = self.fireworks.length;\n<\/span>261<\/span> \n262<\/span> while<\/span>(i--){\n<\/span>263<\/span> var<\/span> f = self.fireworks[i];\n<\/span>264<\/span> self.ctx.lineWidth = f.lineWidth;\n<\/span>265<\/span> \n266<\/span> vx = Math.cos(f.angle) * f.speed,\n<\/span>267<\/span> vy = Math.sin(f.angle) * f.speed;\n<\/span>268<\/span> f.speed *= 1 + f.acceleration;\n<\/span>269<\/span> f.coordLast[2].x = f.coordLast[1].x;\n<\/span>270<\/span> f.coordLast[2].y = f.coordLast[1].y;\n<\/span>271<\/span> f.coordLast[1].x = f.coordLast[0].x;\n<\/span>272<\/span> f.coordLast[1].y = f.coordLast[0].y;\n<\/span>273<\/span> f.coordLast[0].x = f.x;\n<\/span>274<\/span> f.coordLast[0].y = f.y;\n<\/span>275<\/span> \n276<\/span> if<\/span>(f.startX >= f.targetX){\n<\/span>277<\/span> if<\/span>(f.x + vx <= f.targetX){\n<\/span>278<\/span> f.x = f.targetX;\n<\/span>279<\/span> f.hitX = true<\/span>;\n<\/span>280<\/span> } else<\/span> {\n<\/span>281<\/span> f.x += vx;\n<\/span>282<\/span> }\n<\/span>283<\/span> } else<\/span> {\n<\/span>284<\/span> if<\/span>(f.x + vx >= f.targetX){\n<\/span>285<\/span> f.x = f.targetX;\n<\/span>286<\/span> f.hitX = true<\/span>;\n<\/span>287<\/span> } else<\/span> {\n<\/span>288<\/span> f.x += vx;\n<\/span>289<\/span> }\n<\/span>290<\/span> }\n<\/span>291<\/span> \n292<\/span> if<\/span>(f.startY >= f.targetY){\n<\/span>293<\/span> if<\/span>(f.y + vy <= f.targetY){\n<\/span>294<\/span> f.y = f.targetY;\n<\/span>295<\/span> f.hitY = true<\/span>;\n<\/span>296<\/span> } else<\/span> {\n<\/span>297<\/span> f.y += vy;\n<\/span>298<\/span> }\n<\/span>299<\/span> } else<\/span> {\n<\/span>300<\/span> if<\/span>(f.y + vy >= f.targetY){\n<\/span>301<\/span> f.y = f.targetY;\n<\/span>302<\/span> f.hitY = true<\/span>;\n<\/span>303<\/span> } else<\/span> {\n<\/span>304<\/span> f.y += vy;\n<\/span>305<\/span> }\n<\/span>306<\/span> }\n<\/span>307<\/span> \n308<\/span> if<\/span>(f.hitX && f.hitY){\n<\/span>309<\/span> self.createParticles(f.targetX, f.targetY, f.hue);\n<\/span>310<\/span> self.fireworks.splice(i, 1);\n<\/span>311<\/span> \n312<\/span> }\n<\/span>313<\/span> };\n<\/span>314<\/span> };\n<\/span>315<\/span> \n316<\/span> self.drawFireworks = function<\/span>(){\n<\/span>317<\/span> var<\/span> i = self.fireworks.length;\n<\/span>318<\/span> self.ctx.globalCompositeOperation = 'lighter';\n<\/span>319<\/span> while<\/span>(i--){\n<\/span>320<\/span> var<\/span> f = self.fireworks[i];\n<\/span>321<\/span> self.ctx.lineWidth = f.lineWidth;\n<\/span>322<\/span> \n323<\/span> var<\/span> coordRand = (rand(1,3)-1);\n<\/span>324<\/span> self.ctx.beginPath();\n<\/span>325<\/span> self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[coordRand].y));\n<\/span>326<\/span> self.ctx.lineTo(Math.round(f.x), Math.round(f.y));\n<\/span>327<\/span> self.ctx.closePath();\n<\/span>328<\/span> self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+f.alpha+')';\n<\/span>329<\/span> self.ctx.stroke();\n<\/span>330<\/span> \n331<\/span> if<\/span>(self.showTarget){\n<\/span>332<\/span> self.ctx.save();\n<\/span>333<\/span> self.ctx.beginPath();\n<\/span>334<\/span> self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(1,8), 0, Math.PI*2, false<\/span>)\n<\/span>335<\/span> self.ctx.closePath();\n<\/span>336<\/span> self.ctx.lineWidth = 1;\n<\/span>337<\/span> self.ctx.stroke();\n<\/span>338<\/span> self.ctx.restore();\n<\/span>339<\/span> }\n<\/span>340<\/span> \n341<\/span> if<\/span>(self.showShockwave){\n<\/span>342<\/span> self.ctx.save();\n<\/span>343<\/span> self.ctx.translate(Math.round(f.x), Math.round(f.y));\n<\/span>344<\/span> self.ctx.rotate(f.shockwaveAngle);\n<\/span>345<\/span> self.ctx.beginPath();\n<\/span>346<\/span> self.ctx.arc(0, 0, 1*(f.speed\/5), 0, Math.PI, true);\n347<\/span> self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+rand(25, 60)\/100+')';\n348<\/span> self.ctx.lineWidth = f.lineWidth;\n<\/span>349<\/span> self.ctx.stroke();\n<\/span>350<\/span> self.ctx.restore();\n<\/span>351<\/span> }\n<\/span>352<\/span> };\n<\/span>353<\/span> };\n<\/span>354<\/span> \n355<\/span> self.bindEvents = function<\/span>(){\n<\/span>356<\/span> $(window).on('resize', function<\/span>(){\n<\/span>357<\/span> clearTimeout(self.timeout);\n<\/span>358<\/span> self.timeout = setTimeout(function<\/span>() {\n<\/span>359<\/span> self.canvas.width = self.cw = $(window).innerWidth();\n<\/span>360<\/span> self.canvas.height = self.ch = $(window).innerHeight();\n<\/span>361<\/span> self.ctx.lineCap = 'round';\n<\/span>362<\/span> self.ctx.lineJoin = 'round';\n<\/span>363<\/span> }, 100);\n<\/span>364<\/span> });\n<\/span>365<\/span> \n366<\/span> $(self.canvas).on('mousedown', function<\/span>(e){\n<\/span>367<\/span> self.mx = e.pageX - self.canvas.offsetLeft;\n<\/span>368<\/span> self.my = e.pageY - self.canvas.offsetTop;\n<\/span>369<\/span> self.currentHue = rand(self.hueMin, self.hueMax);\n<\/span>370<\/span> self.createFireworks(self.cw\/2, self.ch, self.mx, self.my);\n371<\/span> \n372<\/span> $(self.canvas).on('mousemove.fireworks', function<\/span>(e){\n<\/span>373<\/span> self.mx = e.pageX - self.canvas.offsetLeft;\n<\/span>374<\/span> self.my = e.pageY - self.canvas.offsetTop;\n<\/span>375<\/span> self.currentHue = rand(self.hueMin, self.hueMax);\n<\/span>376<\/span> self.createFireworks(self.cw\/2, self.ch, self.mx, self.my);\n377<\/span> });\n<\/span>378<\/span> });\n<\/span>379<\/span> \n380<\/span> $(self.canvas).on('mouseup', function<\/span>(e){\n<\/span>381<\/span> $(self.canvas).off('mousemove.fireworks');\n<\/span>382<\/span> });\n<\/span>383<\/span> \n384<\/span> }\n<\/span>385<\/span> \n386<\/span> self.clear = function<\/span>(){\n<\/span>387<\/span> self.particles = [];\n<\/span>388<\/span> self.fireworks = [];\n<\/span>389<\/span> self.ctx.clearRect(0, 0, self.cw, self.ch);\n<\/span>390<\/span> };\n<\/span>391<\/span> \n392<\/span> \n393<\/span> self.canvasLoop = function<\/span>(){\n<\/span>394<\/span> requestAnimFrame(self.canvasLoop, self.canvas);\n<\/span>395<\/span> self.ctx.globalCompositeOperation = 'destination-out';\n<\/span>396<\/span> self.ctx.fillStyle = 'rgba(0,0,0,'+self.clearAlpha\/100+')';\n397<\/span> self.ctx.fillRect(0,0,self.cw,self.ch);\n<\/span>398<\/span> self.updateFireworks();\n<\/span>399<\/span> self.updateParticles();\n<\/span>400<\/span> self.drawFireworks();\n<\/span>401<\/span> self.drawParticles();\n<\/span>402<\/span> \n403<\/span> };\n<\/span>404<\/span> \n405<\/span> self.init();\n<\/span>406<\/span> \n407<\/span> }\n<\/span>408<\/span> var<\/span> fworks = new<\/span> Fireworks();\n<\/span>409<\/span> \n410<\/span> });\n<\/span>411<\/span> \n412<\/span> <\/script>\n413<\/span> \n414<\/span> <\/body>\n415<\/span> <\/html><\/pre>\n<\/div>\n Dear netizens! Because this was sent by the teacher during the holiday! So I can’t understand some things! I’m really sorry. If you don’t understand anything, just leave a message and tell me! I’ll go to my former teacher and ask Ask, even though he has retired for a long time!!<\/p>"}</script><script type="application/ld+json"> [ { "@context":"https://schema.org", "@type":"BreadcrumbList", "itemListElement":[ { "@type":"ListItem", "position":1, "item":{"@id":"http://m.php.cn/", "name":"Home"} } ,{ "@type":"ListItem", "position":2, "item":{"@id":"http://m.php.cn/article.html", "name":"Technical Articles"} } ,{ "@type":"ListItem", "position":3, "item":{"@id":"http://m.php.cn/web-designer.html", "name":"Web Front-end"} } ,{ "@type":"ListItem", "position":4, "item":{"@id":"http://m.php.cn/faq/369620.html", "name":"JQuery and html+css implement mouse click to set off fireworks"} } ] } ] </script></head><body><div class="bodyBg"><link rel="stylesheet" type="text/css" href="/static/csshwm/m_stylehw.css"><header><div class="head"><div class="haed_left"><div class="haed_logo"><a href="http://m.php.cn/" title="php.cn" class="haed_logo_a"><img src="/static/imghwm/logo.png" alt="php.cn" class="haed_logoimg"></a></div></div><div class="search_div search_div_top2"><input id="key_words" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="" onkeydown="if (event.keyCode == 13) searchs('en')"/><a onclick="searchs('en')" href="javascript:;" title="search"><img onerror="this.onerror=''; this.src='static/imghwm/default1.png'" src="/static/imghwm/find.png" alt="search"></a></div><div class="head_right"><button type="button" class="layui-btn layui-btn-primary headerlan headlanmax lan1" id="lan1sp" lay-on="test-offset-r"><img src="/static/imghwm/m_menu.png" alt=""></button><div id="m_menu" class="m_menu" style="display: none;"><div class="m_editormain12main_top"><img src="/static/imghwm/logo.png" alt="logo"><a href="javascript:;" class="m_editormain12main_topi" id="m_editormain12main_topi_sp"></a></div><div class="layui-panel m_menu_main"><ul class="layui-menu" id="demo-menu"><li class="layui-menu-item-group layui-menu-item-up m_menus" lay-options="{type: 'group'}"><div class="layui-menu-body-title m_menus_title">Community</div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/article.html" title="Articles">Articles</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/faq/zt" title="Topics">Topics</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/wenda.html" title="Q&A">Q&A</a></div></li></ul></li><li class="layui-menu-item-divider"></li><li class="layui-menu-item-group layui-menu-item-up m_menus" lay-options="{type: 'group'}"><div class="layui-menu-body-title m_menus_title">Learn</div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/course.html" title="Course">Course</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/dic/" title="Programming Dictionary">Programming Dictionary</a></div></li></ul></li><li class="layui-menu-item-divider"></li><li class="layui-menu-item-group layui-menu-item-up m_menus" lay-options="{type: 'group'}"><div class="layui-menu-body-title m_menus_title">Tools Library</div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/toolset/development-tools" title="Development tools">Development tools</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/toolset/website-source-code" title="Website Source Code">Website Source Code</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/toolset/php-libraries" title="PHP Libraries">PHP Libraries</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/toolset/js-special-effects" title="JS special effects">JS special effects</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/toolset/website-materials" title="Website Materials">Website Materials</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/toolset/extension-plug-ins" title="Extension plug-ins">Extension plug-ins</a></div></li></ul></li><li class="layui-menu-item-divider"></li><li class="layui-menu-item-group layui-menu-item-up m_menus" lay-options="{type: 'group'}"><div class="layui-menu-body-title m_menus_title">Leisure</div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/game" title="Game Download">Game Download</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/mobile-game-tutorial/" title="Game Tutorials">Game Tutorials</a></div></li></ul></li><li class="layui-menu-item-divider"></li></ul></div><div class="m_menu_button m_menu_button_login"><a href="http://m.php.cn/login" title="Login">Log in</a></div><div class="m_menu_button m_menu_button_lang"><button type="button" class="layui-btn layui-btn-primary headerlan headlanmax lan1" id="lan1" lay-on="page2">English</button></div></div><div class="m_menu_lang" id="m_menu_lang" style="display: none;"><div class="m_editormain12main_top"><img src="/static/imghwm/logo.png" alt="logo"><a href="javascript:;" class="m_editormain12main_topi" id="m_editormain12main_topi_lan"></a></div><div class="m_menu_lang_main"><a href="javascript:setlang('zh-cn');" class="m_menu_lang_mains">简体中文zh-cn</a><a href="javascript:;" class="m_menu_lang_mains">Englishen</a><a href="javascript:setlang('zh-tw');" class="m_menu_lang_mains">繁体中文zh-tw</a><a href="javascript:setlang('ja');" class="m_menu_lang_mains">日本語ja</a><a href="javascript:setlang('ko');" class="m_menu_lang_mains">한국어ko</a><a href="javascript:setlang('ms');" class="m_menu_lang_mains">Melayums</a><a href="javascript:setlang('fr');" class="m_menu_lang_mains">Françaisfr</a><a href="javascript:setlang('de');" class="m_menu_lang_mains">Deutschde</a></div></div></div></div></header><script> document.getElementById('lan1sp').addEventListener('click', function (event) { event.preventDefault(); var elements = document.getElementsByClassName('m_menu'); for (var i = 0; i < elements.length; i++) { elements[i].style.display = 'block'; } }); document.getElementById('m_editormain12main_topi_sp').addEventListener('click', function (event) { event.preventDefault(); var elements = document.getElementsByClassName('m_menu'); for (var i = 0; i < elements.length; i++) { elements[i].style.display = 'none'; } }); document.getElementById('lan1').addEventListener('click', function (event) { event.preventDefault(); var elements = document.getElementsByClassName('m_menu_lang'); for (var i = 0; i < elements.length; i++) { elements[i].style.display = 'block'; } }); document.getElementById('m_editormain12main_topi_lan').addEventListener('click', function (event) { event.preventDefault(); var elements = document.getElementsByClassName('m_menu_lang'); for (var i = 0; i < elements.length; i++) { elements[i].style.display = 'none'; } }); </script><div class="bodyMain"><div class="nphpSize"><div class="nphpSizeIn"><a href="http://m.php.cn/" title="Home" class="bBlack">Home</a> > <a href="http://m.php.cn/article.html" title="Article" class="bBlack">Article</a> > <a href="http://m.php.cn/web-designer.html" class="cBlack">Web Front-end</a> > JQuery and html+css implement mouse click to set off fireworks<div class="clear"></div></div></div><div class="nphpQianBox"><div class="nphpQianTitle"><h1>JQuery and html+css implement mouse click to set off fireworks</h1><div class="nphpQianTitleIn"><img data-src="https://img.php.cn/upload/avatar/000/000/001/6251028808086368.png" alt="PHP中文网" class="lazyload" src="/static/front/mobimages/moren/moren.png" /><dl><dt>PHP中文网Original<div class="clear"></div></dt><dd>2017-06-20 09:36:001523browse<div class="clear"></div></dd></dl><div class="clear"></div></div></div><div class="nphpQianCont wenda-list"><div class="cnblogs_code"> <pre class="brush:php;toolbar:false"> 1 <!DOCTYPE html> 2 <html> 3 <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 <title>HTML5烟花燃放特效代码</title> 5 6 <style> 7 html,body{height:100%;margin:0;padding:0} 8 ul,li{text-indent:0;text-decoration:none;margin:0;padding:0} 9 img{border:0} 10 body{background-color:#000;color:#999;font:100%/18px helvetica, arial, sans-serif} 11 canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20} 12 *{ 13 margin: 0px; 14 padding: 0px; 15 } 16 #bg_Img{ 17 width: 1920px; 18 height: 1500px; 19 border: 1px solid transparent; 20 background: url("start.gif") repeat; 21 text-align: center; 22 } 23 ul{ 24 width: 5555px; 25 height: 200px; 26 } 27 li{ 28 font: 120px/190px "楷体"; 29 color: white; 30 text-shadow: 5px 10px 10px 10px; 31 list-style: none; 32 float: left; 33 display: none; 34 } 35 #text_bd{ 36 width: 600px; 37 height: 200px; 38 border: 5px solid transparent; 39 margin-left: 200px; 40 } 41 #mouse_click{ 42 margin: 0px auto; 43 text-align: center; 44 color: white; 45 } 46 </style> 47 48 </head> 49 <body> 50 <div id="bg_Img"> 51 <div id="text_bd"> 52 <ul> 53 <li>O(∩_∩)O~~</li> 54 <li>同</li> 55 <li>学</li> 56 <li>们</li> 57 <li>节</li> 58 <li>日</li> 59 <li>快</li> 60 <li>乐</li> 61 <li>~~</li> 62 </ul> 63 </div> 64 <div id="mouse_click">鼠标点击释放烟花效果</div> 65 </div> 66 <script type="text/javascript" src="jquery-3.1.1.js"></script> 67 <script type="text/javascript"> 68 var aLi=document.querySelectorAll("li"); 69 setInterval(a,1000); 70 setInterval(b,2000); 71 setInterval(c,3000); 72 setInterval(d,4000); 73 setInterval(e,5000); 74 setInterval(f,6000); 75 setInterval(g,7000); 76 setInterval(h,8000); 77 function a() { 78 aLi[0].style.display = "block" 79 } 80 function b() { 81 aLi[1].style.display = "block" 82 } 83 function c() { 84 aLi[2].style.display = "block" 85 } 86 function d() { 87 aLi[3].style.display = "block" 88 } 89 function e() { 90 aLi[4].style.display = "block" 91 } 92 function f() { 93 aLi[5].style.display = "block" 94 } 95 function g() { 96 aLi[6].style.display = "block" 97 } 98 function h() { 99 aLi[7].style.display = "block" 100 } 101 $(function(){ 102 var Fireworks = function(){ 103 var self = this; 104 var rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);} 105 var hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);}; 106 window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)}}(); 107 108 self.init = function(){ 109 self.canvas = document.createElement('canvas'); 110 self.canvas.width = self.cw = $(window).innerWidth(); 111 self.canvas.height = self.ch = $(window).innerHeight(); 112 self.particles = []; 113 self.partCount = 150; 114 self.fireworks = []; 115 self.mx = self.cw/2; 116 self.my = self.ch/2; 117 self.currentHue = 30; 118 self.partSpeed = 5; 119 self.partSpeedVariance = 10; 120 self.partWind = 50; 121 self.partFriction = 5; 122 self.partGravity = 1; 123 self.hueMin = 0; 124 self.hueMax = 360; 125 self.fworkSpeed = 4; 126 self.fworkAccel = 10; 127 self.hueVariance = 30; 128 self.flickerDensity = 25; 129 self.showShockwave = true; 130 self.showTarget = false; 131 self.clearAlpha = 25; 132 133 $(document.body).append(self.canvas); 134 self.ctx = self.canvas.getContext('2d'); 135 self.ctx.lineCap = 'round'; 136 self.ctx.lineJoin = 'round'; 137 self.lineWidth = 1; 138 self.bindEvents(); 139 self.canvasLoop(); 140 141 self.canvas.onselectstart = function() { 142 return false; 143 }; 144 }; 145 146 self.createParticles = function(x,y, hue){ 147 var countdown = self.partCount; 148 while(countdown--){ 149 var newParticle = { 150 x: x, 151 y: y, 152 coordLast: [ 153 {x: x, y: y}, 154 {x: x, y: y}, 155 {x: x, y: y} 156 ], 157 angle: rand(0, 360), 158 speed: rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed + self.partSpeedVariance)), 159 friction: 1 - self.partFriction/100, 160 gravity: self.partGravity/2, 161 hue: rand(hue-self.hueVariance, hue+self.hueVariance), 162 brightness: rand(50, 80), 163 alpha: rand(40,100)/100, 164 decay: rand(10, 50)/1000, 165 wind: (rand(0, self.partWind) - (self.partWind/2))/25, 166 lineWidth: self.lineWidth 167 }; 168 self.particles.push(newParticle); 169 } 170 }; 171 172 173 self.updateParticles = function(){ 174 var i = self.particles.length; 175 while(i--){ 176 var p = self.particles[i]; 177 var radians = p.angle * Math.PI / 180; 178 var vx = Math.cos(radians) * p.speed; 179 var vy = Math.sin(radians) * p.speed; 180 p.speed *= p.friction; 181 182 p.coordLast[2].x = p.coordLast[1].x; 183 p.coordLast[2].y = p.coordLast[1].y; 184 p.coordLast[1].x = p.coordLast[0].x; 185 p.coordLast[1].y = p.coordLast[0].y; 186 p.coordLast[0].x = p.x; 187 p.coordLast[0].y = p.y; 188 189 p.x += vx; 190 p.y += vy; 191 p.y += p.gravity; 192 193 p.angle += p.wind; 194 p.alpha -= p.decay; 195 196 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){ 197 self.particles.splice(i, 1); 198 } 199 }; 200 }; 201 202 self.drawParticles = function(){ 203 var i = self.particles.length; 204 while(i--){ 205 var p = self.particles[i]; 206 207 var coordRand = (rand(1,3)-1); 208 self.ctx.beginPath(); 209 self.ctx.moveTo(Math.round(p.coordLast[coordRand].x), Math.round(p.coordLast[coordRand].y)); 210 self.ctx.lineTo(Math.round(p.x), Math.round(p.y)); 211 self.ctx.closePath(); 212 self.ctx.strokeStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+p.alpha+')'; 213 self.ctx.stroke(); 214 215 if(self.flickerDensity > 0){ 216 var inverseDensity = 50 - self.flickerDensity; 217 if(rand(0, inverseDensity) === inverseDensity){ 218 self.ctx.beginPath(); 219 self.ctx.arc(Math.round(p.x), Math.round(p.y), rand(p.lineWidth,p.lineWidth+3)/2, 0, Math.PI*2, false) 220 self.ctx.closePath(); 221 var randAlpha = rand(50,100)/100; 222 self.ctx.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+randAlpha+')'; 223 self.ctx.fill(); 224 } 225 } 226 }; 227 }; 228 229 230 self.createFireworks = function(startX, startY, targetX, targetY){ 231 var newFirework = { 232 x: startX, 233 y: startY, 234 startX: startX, 235 startY: startY, 236 hitX: false, 237 hitY: false, 238 coordLast: [ 239 {x: startX, y: startY}, 240 {x: startX, y: startY}, 241 {x: startX, y: startY} 242 ], 243 targetX: targetX, 244 targetY: targetY, 245 speed: self.fworkSpeed, 246 angle: Math.atan2(targetY - startY, targetX - startX), 247 shockwaveAngle: Math.atan2(targetY - startY, targetX - startX)+(90*(Math.PI/180)), 248 acceleration: self.fworkAccel/100, 249 hue: self.currentHue, 250 brightness: rand(50, 80), 251 alpha: rand(50,100)/100, 252 lineWidth: self.lineWidth 253 }; 254 self.fireworks.push(newFirework); 255 256 }; 257 258 259 self.updateFireworks = function(){ 260 var i = self.fireworks.length; 261 262 while(i--){ 263 var f = self.fireworks[i]; 264 self.ctx.lineWidth = f.lineWidth; 265 266 vx = Math.cos(f.angle) * f.speed, 267 vy = Math.sin(f.angle) * f.speed; 268 f.speed *= 1 + f.acceleration; 269 f.coordLast[2].x = f.coordLast[1].x; 270 f.coordLast[2].y = f.coordLast[1].y; 271 f.coordLast[1].x = f.coordLast[0].x; 272 f.coordLast[1].y = f.coordLast[0].y; 273 f.coordLast[0].x = f.x; 274 f.coordLast[0].y = f.y; 275 276 if(f.startX >= f.targetX){ 277 if(f.x + vx <= f.targetX){ 278 f.x = f.targetX; 279 f.hitX = true; 280 } else { 281 f.x += vx; 282 } 283 } else { 284 if(f.x + vx >= f.targetX){ 285 f.x = f.targetX; 286 f.hitX = true; 287 } else { 288 f.x += vx; 289 } 290 } 291 292 if(f.startY >= f.targetY){ 293 if(f.y + vy <= f.targetY){ 294 f.y = f.targetY; 295 f.hitY = true; 296 } else { 297 f.y += vy; 298 } 299 } else { 300 if(f.y + vy >= f.targetY){ 301 f.y = f.targetY; 302 f.hitY = true; 303 } else { 304 f.y += vy; 305 } 306 } 307 308 if(f.hitX && f.hitY){ 309 self.createParticles(f.targetX, f.targetY, f.hue); 310 self.fireworks.splice(i, 1); 311 312 } 313 }; 314 }; 315 316 self.drawFireworks = function(){ 317 var i = self.fireworks.length; 318 self.ctx.globalCompositeOperation = 'lighter'; 319 while(i--){ 320 var f = self.fireworks[i]; 321 self.ctx.lineWidth = f.lineWidth; 322 323 var coordRand = (rand(1,3)-1); 324 self.ctx.beginPath(); 325 self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[coordRand].y)); 326 self.ctx.lineTo(Math.round(f.x), Math.round(f.y)); 327 self.ctx.closePath(); 328 self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+f.alpha+')'; 329 self.ctx.stroke(); 330 331 if(self.showTarget){ 332 self.ctx.save(); 333 self.ctx.beginPath(); 334 self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(1,8), 0, Math.PI*2, false) 335 self.ctx.closePath(); 336 self.ctx.lineWidth = 1; 337 self.ctx.stroke(); 338 self.ctx.restore(); 339 } 340 341 if(self.showShockwave){ 342 self.ctx.save(); 343 self.ctx.translate(Math.round(f.x), Math.round(f.y)); 344 self.ctx.rotate(f.shockwaveAngle); 345 self.ctx.beginPath(); 346 self.ctx.arc(0, 0, 1*(f.speed/5), 0, Math.PI, true); 347 self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+rand(25, 60)/100+')'; 348 self.ctx.lineWidth = f.lineWidth; 349 self.ctx.stroke(); 350 self.ctx.restore(); 351 } 352 }; 353 }; 354 355 self.bindEvents = function(){ 356 $(window).on('resize', function(){ 357 clearTimeout(self.timeout); 358 self.timeout = setTimeout(function() { 359 self.canvas.width = self.cw = $(window).innerWidth(); 360 self.canvas.height = self.ch = $(window).innerHeight(); 361 self.ctx.lineCap = 'round'; 362 self.ctx.lineJoin = 'round'; 363 }, 100); 364 }); 365 366 $(self.canvas).on('mousedown', function(e){ 367 self.mx = e.pageX - self.canvas.offsetLeft; 368 self.my = e.pageY - self.canvas.offsetTop; 369 self.currentHue = rand(self.hueMin, self.hueMax); 370 self.createFireworks(self.cw/2, self.ch, self.mx, self.my); 371 372 $(self.canvas).on('mousemove.fireworks', function(e){ 373 self.mx = e.pageX - self.canvas.offsetLeft; 374 self.my = e.pageY - self.canvas.offsetTop; 375 self.currentHue = rand(self.hueMin, self.hueMax); 376 self.createFireworks(self.cw/2, self.ch, self.mx, self.my); 377 }); 378 }); 379 380 $(self.canvas).on('mouseup', function(e){ 381 $(self.canvas).off('mousemove.fireworks'); 382 }); 383 384 } 385 386 self.clear = function(){ 387 self.particles = []; 388 self.fireworks = []; 389 self.ctx.clearRect(0, 0, self.cw, self.ch); 390 }; 391 392 393 self.canvasLoop = function(){ 394 requestAnimFrame(self.canvasLoop, self.canvas); 395 self.ctx.globalCompositeOperation = 'destination-out'; 396 self.ctx.fillStyle = 'rgba(0,0,0,'+self.clearAlpha/100+')'; 397 self.ctx.fillRect(0,0,self.cw,self.ch); 398 self.updateFireworks(); 399 self.updateParticles(); 400 self.drawFireworks(); 401 self.drawParticles(); 402 403 }; 404 405 self.init(); 406 407 } 408 var fworks = new Fireworks(); 409 410 }); 411 412 </script> 413 414 </body> 415 </html></pre> </div> Dear netizens! Because this was sent by the teacher during the holiday! So I can’t understand some things! I’m really sorry. If you don’t understand anything, just leave a message and tell me! I’ll go to my former teacher and ask Ask, even though he has retired for a long time!!The above is the detailed content of JQuery and html+css implement mouse click to set off fireworks. For more information, please follow other related articles on the PHP Chinese website!</div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng">Statement：<div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox">Previous article：<a class="dBlack" title="How to use javaScript event binding" href="http://m.php.cn/faq/369618.html">How to use javaScript event binding</a>Next article：<a class="dBlack" title="How to use javaScript event binding" href="http://m.php.cn/faq/369622.html">How to use javaScript event binding</a></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><a href="http://m.php.cn/article.html" class="bBlack">See more</a><div class="clear"></div></div><ul class="nphpXgwzList"><li><a href="http://m.php.cn/faq/1609.html" title="An in-depth analysis of the Bootstrap list group component" class="aBlack">An in-depth analysis of the Bootstrap list group component</a><div class="clear"></div></li><li><a href="http://m.php.cn/faq/1640.html" title="Detailed explanation of JavaScript function currying" class="aBlack">Detailed explanation of JavaScript function currying</a><div class="clear"></div></li><li><a href="http://m.php.cn/faq/1949.html" title="Complete example of JS password generation and strength detection (with demo source code download)" class="aBlack">Complete example of JS password generation and strength detection (with demo source code download)</a><div class="clear"></div></li><li><a href="http://m.php.cn/faq/2248.html" title="Angularjs integrates WeChat UI (weui)" class="aBlack">Angularjs integrates WeChat UI (weui)</a><div class="clear"></div></li><li><a href="http://m.php.cn/faq/2351.html" title="How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills" class="aBlack">How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt="">Public welfare online PHP training，Help PHP learners grow quickly！</div><div class="footermid"><a href="http://m.php.cn/about/us.html">About us</a><a href="http://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="http://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"> © php.cn All rights reserved </div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append(""); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>