JQuery和html+css實作滑鼠點擊放煙火-js教程-PHP中文網

4 HTML5煙火燃放特效程式碼</ title> 5 6 <"/><meta property="og:local" content="zh-tw"> <meta property="og:title" content="JQuery和html+css實作滑鼠點擊放煙火-js教程-PHP中文網"> <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煙火燃放特效程式碼</ title> 5 6 <"> <meta property="og:url" content="https://m.php.cn/zh-tw/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/zh-tw/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/zh-tw/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:'看更多', FoldUp:'折起來', Choice:'語言', wait:'正在加載，請稍候~', LoginFirst:"請先登入", needKeyword:'輸入關鍵字搜尋', emailPhoneError:'請輸入正確的電話或電子郵件地址', missPwd:'請輸入密碼', emailError:'請輸入您正確的電子郵件地址', VerCode:"請輸入驗證碼", getCode:'傳送', pwdError:'密碼格式不正確', TwoPassNotMatch:'兩個密碼不匹配', Bindemail:'綁定信箱', resetpassword:'重新設密碼', ConfirmPass:'確認密碼', pwdCheck:'請輸入6-18個字母或數字', Editinfor: '編輯個人資訊', trimContent:'請輸入內容', titleCheck:'標題長度應至少為 5 個字', choiceLang:'請選擇語言分類', Secondreply:'回覆', NetWorkError:'網路錯誤，請稍後重試！', keywordSearch:'輸入關鍵字搜尋', all_lang_string:'zh|en|zh-tw|ja|ko|ms|fr|de', Next:'下一頁', 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和html+css實作滑鼠點擊放煙火","description":"1 <!DOCTYPE html> 2 <html> 3 <head><meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\"> 4 <title>HTML5煙火燃放特效程式碼<\/ title> 5 6 <","datePublished":"2017-06-20T09:36:00+8:00","author":{"url":"http:\/\/m.php.cn\/zh-tw\/member\/1.html","name":"PHP中文网"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/m.php.cn\/zh-tw\/faq\/369620.html"},"url":"https:\/\/m.php.cn\/zh-tw\/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廣大網友們!因為這是放假的時候老師給發的!所以我也看不太懂有些東西!實在是抱歉有什麼不明白的,就留言告訴我!我去找我曾經的老師問問,雖然他已經退休好久了!!<\/p>"}</script><script type="application/ld+json"> [ { "@context":"https://schema.org", "@type":"BreadcrumbList", "itemListElement":[ { "@type":"ListItem", "position":1, "item":{"@id":"http://m.php.cn/zh-tw/", "name":"首頁"} } ,{ "@type":"ListItem", "position":2, "item":{"@id":"http://m.php.cn/zh-tw/article.html", "name":"科技文章"} } ,{ "@type":"ListItem", "position":3, "item":{"@id":"http://m.php.cn/zh-tw/web-designer.html", "name":"web前端"} } ,{ "@type":"ListItem", "position":4, "item":{"@id":"http://m.php.cn/zh-tw/faq/369620.html", "name":"JQuery和html+css實作滑鼠點擊放煙火"} } ] } ] </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/zh-tw/" title="PHP中文網" class="haed_logo_a"><img src="/static/imghwm/logo.png" alt="PHP中文網" 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('zh-tw')"/><a onclick="searchs('zh-tw')" href="javascript:;" title="搜尋"><img onerror="this.onerror=''; this.src='static/imghwm/default1.png'" src="/static/imghwm/find.png" alt="搜尋"></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">社群</div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/zh-tw/article.html" title="文章">文章</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/zh-tw/faq/zt" title="合集">合集</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/zh-tw/wenda.html" title="問答">問答</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">學習</div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/zh-tw/course.html" title="課程">課程</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/zh-tw/dic/" title="程式設計字典">程式設計字典</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">工具庫</div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/zh-tw/toolset/development-tools" title="開發工具">開發工具</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/zh-tw/toolset/website-source-code" title="網站源碼">網站源碼</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/zh-tw/toolset/php-libraries" title="PHP 函式庫">PHP 函式庫</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/zh-tw/toolset/js-special-effects" title="JS特效">JS特效</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/zh-tw/toolset/website-materials" title="網站素材">網站素材</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/zh-tw/toolset/extension-plug-ins" title="擴充插件">擴充插件</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">休閒</div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/zh-tw/game" title="遊戲下載">遊戲下載</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/zh-tw/mobile-game-tutorial/" title="遊戲教程">遊戲教程</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/zh-tw/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">繁体中文</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:setlang('en');" class="m_menu_lang_mains">Englishen</a><a href="javascript:;" 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/zh-tw/" title="首頁" class="bBlack">首頁</a> > <a href="http://m.php.cn/zh-tw/article.html" title="文章" class="bBlack">文章</a> > <a href="http://m.php.cn/zh-tw/web-designer.html" class="cBlack">web前端</a> > JQuery和html+css實作滑鼠點擊放煙火<div class="clear"></div></div></div><div class="nphpQianBox"><div class="nphpQianTitle"><h1>JQuery和html+css實作滑鼠點擊放煙火</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中文网原創<div class="clear"></div></dt><dd>2017-06-20 09:36:001525瀏覽<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> 廣大網友們!因為這是放假的時候老師給發的!所以我也看不太懂有些東西!實在是抱歉有什麼不明白的,就留言告訴我!我去找我曾經的老師問問,雖然他已經退休好久了!!以上是JQuery和html+css實作滑鼠點擊放煙火的詳細內容。更多資訊請關注PHP中文網其他相關文章！</div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng">陳述：<div>本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn</div></div></div><div class="nphpSytBox">上一篇：<a class="dBlack" title="javaScript事件綁使用方法" href="http://m.php.cn/zh-tw/faq/369618.html">javaScript事件綁使用方法</a>下一篇：<a class="dBlack" title="javaScript事件綁使用方法" href="http://m.php.cn/zh-tw/faq/369622.html">javaScript事件綁使用方法</a></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>相關文章</h2><a href="http://m.php.cn/zh-tw/article.html" class="bBlack">看更多</a><div class="clear"></div></div><ul class="nphpXgwzList"><li><a href="http://m.php.cn/zh-tw/faq/1609.html" title="深入淺析Bootstrap列表組元件" class="aBlack">深入淺析Bootstrap列表組元件</a><div class="clear"></div></li><li><a href="http://m.php.cn/zh-tw/faq/1640.html" title="JavaScript函數柯里化詳解" class="aBlack">JavaScript函數柯里化詳解</a><div class="clear"></div></li><li><a href="http://m.php.cn/zh-tw/faq/1949.html" title="JS密碼產生與強度偵測完整實例(附demo源碼下載)" class="aBlack">JS密碼產生與強度偵測完整實例(附demo源碼下載)</a><div class="clear"></div></li><li><a href="http://m.php.cn/zh-tw/faq/2248.html" title="Angularjs整合微信UI（weui）" class="aBlack">Angularjs整合微信UI（weui）</a><div class="clear"></div></li><li><a href="http://m.php.cn/zh-tw/faq/2351.html" title="JavaScript快速切換繁體中文和簡體中文的方法及網站支援簡繁體切換的絕招_javascript技巧" class="aBlack">JavaScript快速切換繁體中文和簡體中文的方法及網站支援簡繁體切換的絕招_javascript技巧</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt="">公益線上PHP培訓，幫助PHP學習者快速成長！</div><div class="footermid"><a href="http://m.php.cn/zh-tw/about/us.html">關於我們</a><a href="http://m.php.cn/zh-tw/about/disclaimer.html">免責聲明</a><a href="http://m.php.cn/zh-tw/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>