JQuery und HTML+CSS implementieren einen Mausklick, um ein Feuerwerk auszulösen-js-Tutorial-php.cn

4 HTML5-Code für Spezialeffekte für die Feuerwerksanzeige< /Titel> 5 6 <"/><meta property="og:local" content="de"> <meta property="og:title" content="JQuery und HTML+CSS implementieren einen Mausklick, um ein Feuerwerk auszulösen-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-Code für Spezialeffekte für die Feuerwerksanzeige< /Titel> 5 6 <"> <meta property="og:url" content="https://m.php.cn/de/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/de/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/de/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:'Mehr sehen', FoldUp:'Zusammenklappen', Choice:'Sprache', wait:'Laden, bitte warten~', LoginFirst:"Bitte loggen Sie sich zuerst ein", needKeyword:'Geben Sie die Stichwortsuche ein', emailPhoneError:'Bitte geben Sie die richtige Telefon- oder E-Mail-Adresse ein', missPwd:'Bitte geben Sie das Passwort ein', emailError:'Bitte geben Sie Ihre korrekte E-Mail-Adresse ein', VerCode:"Bitte den Bestätigungscode eingeben", getCode:'Senden', pwdError:'Falsches Passwortformat', TwoPassNotMatch:'Zwei Passwörter stimmen nicht überein', Bindemail:'E-Mail binden', resetpassword:'Passwort zurücksetzen', ConfirmPass:'Bestätige das Passwort', pwdCheck:'Bitte geben Sie 6-18 Buchstaben oder Zahlen ein', Editinfor: 'Persönliche Informationen bearbeiten', trimContent:'Bitte geben Sie Inhalte ein', titleCheck:'Der Titel sollte mindestens 5 Wörter lang sein', choiceLang:'Bitte wählen Sie eine Sprachklassifizierung aus', Secondreply:'Antwort', NetWorkError:'Netzwerkfehler, bitte versuchen Sie es später noch einmal!', keywordSearch:'Geben Sie die Stichwortsuche ein', all_lang_string:'zh|en|zh-tw|ja|ko|ms|fr|de', Next:'Nächste', Previous:'Vorherige' }; </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 und HTML+CSS implementieren einen Mausklick, um ein Feuerwerk auszulösen","description":"1 <!DOCTYPE html> 2 <html> 3 <head><meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\"> 4 <title>HTML5-Code für Spezialeffekte für die Feuerwerksanzeige< \/Titel> 5 6 <","datePublished":"2017-06-20T09:36:00+8:00","author":{"url":"http:\/\/m.php.cn\/de\/member\/1.html","name":"PHP中文网"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/m.php.cn\/de\/faq\/369620.html"},"url":"https:\/\/m.php.cn\/de\/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 Liebe Internetnutzer! Da ich einige Dinge nicht verstehe, hinterlassen Sie einfach eine Nachricht! Ich werde zu meinem ehemaligen Lehrer gehen und Ask fragen, auch wenn er schon lange im Ruhestand ist!!<\/p>"}</script><script type="application/ld+json"> [ { "@context":"https://schema.org", "@type":"BreadcrumbList", "itemListElement":[ { "@type":"ListItem", "position":1, "item":{"@id":"http://m.php.cn/de/", "name":"Heim"} } ,{ "@type":"ListItem", "position":2, "item":{"@id":"http://m.php.cn/de/article.html", "name":"Technische Artikel"} } ,{ "@type":"ListItem", "position":3, "item":{"@id":"http://m.php.cn/web-designer.html", "name":"Web-Frontend"} } ,{ "@type":"ListItem", "position":4, "item":{"@id":"http://m.php.cn/de/faq/369620.html", "name":"JQuery und HTML+CSS implementieren einen Mausklick, um ein Feuerwerk auszulösen"} } ] } ] </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/de/" title="Chinesische PHP-Website" class="haed_logo_a"><img src="/static/imghwm/logo.png" alt="Chinesische PHP-Website" 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('de')"/><a onclick="searchs('de')" href="javascript:;" title="suchen"><img onerror="this.onerror=''; this.src='static/imghwm/default1.png'" src="/static/imghwm/find.png" alt="suchen"></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">Gemeinschaft</div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/de/article.html" title="Artikel">Artikel</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/de/faq/zt" title="Themen">Themen</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/de/wenda.html" title="Fragen und Antworten">Fragen und Antworten</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">Lernen</div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/de/course.html" title="Kurs">Kurs</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/de/dic/" title="Programmierwörterbuch">Programmierwörterbuch</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-Bibliothek</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="Entwicklungswerkzeuge">Entwicklungswerkzeuge</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/toolset/website-source-code" title="Quellcode der Website">Quellcode der Website</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/de/toolset/php-libraries" title="PHP-Bibliotheken">PHP-Bibliotheken</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/de/toolset/js-special-effects" title="JS-Spezialeffekte">JS-Spezialeffekte</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/de/toolset/website-materials" title="Website-Materialien">Website-Materialien</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/de/toolset/extension-plug-ins" title="Erweiterungs-Plug-Ins">Erweiterungs-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">Freizeit</div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/de/game" title="Spiel-Download">Spiel-Download</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/de/mobile-game-tutorial/" title="Spiel-Tutorials">Spiel-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/de/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">Deutsch</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: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:;" 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/de/" title="Heim" class="bBlack">Heim</a> > <a href="http://m.php.cn/de/article.html" title="Artikel" class="bBlack">Artikel</a> > <a href="http://m.php.cn/web-designer.html" class="cBlack">Web-Frontend</a> > JQuery und HTML+CSS implementieren einen Mausklick, um ein Feuerwerk auszulösen<div class="clear"></div></div></div><div class="nphpQianBox"><div class="nphpQianTitle"><h1>JQuery und HTML+CSS implementieren einen Mausklick, um ein Feuerwerk auszulösen</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:001524Durchsuche<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> Liebe Internetnutzer! Da ich einige Dinge nicht verstehe, hinterlassen Sie einfach eine Nachricht! Ich werde zu meinem ehemaligen Lehrer gehen und Ask fragen, auch wenn er schon lange im Ruhestand ist!!Das obige ist der detaillierte Inhalt vonJQuery und HTML+CSS implementieren einen Mausklick, um ein Feuerwerk auszulösen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng">Stellungnahme：<div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox">Vorheriger Artikel：<a class="dBlack" title="So verwenden Sie die JavaScript-Ereignisbindung" href="http://m.php.cn/de/faq/369618.html">So verwenden Sie die JavaScript-Ereignisbindung</a>Nächster Artikel：<a class="dBlack" title="So verwenden Sie die JavaScript-Ereignisbindung" href="http://m.php.cn/de/faq/369622.html">So verwenden Sie die JavaScript-Ereignisbindung</a></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><a href="http://m.php.cn/de/article.html" class="bBlack">Mehr sehen</a><div class="clear"></div></div><ul class="nphpXgwzList"><li><a href="http://m.php.cn/de/faq/1609.html" title="Eine eingehende Analyse der Bootstrap-Listengruppenkomponente" class="aBlack">Eine eingehende Analyse der Bootstrap-Listengruppenkomponente</a><div class="clear"></div></li><li><a href="http://m.php.cn/de/faq/1640.html" title="Detaillierte Erläuterung des JavaScript-Funktions-Curryings" class="aBlack">Detaillierte Erläuterung des JavaScript-Funktions-Curryings</a><div class="clear"></div></li><li><a href="http://m.php.cn/de/faq/1949.html" title="Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)" class="aBlack">Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)</a><div class="clear"></div></li><li><a href="http://m.php.cn/de/faq/2248.html" title="Angularjs integriert WeChat UI (weui)" class="aBlack">Angularjs integriert WeChat UI (weui)</a><div class="clear"></div></li><li><a href="http://m.php.cn/de/faq/2351.html" title="Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse" class="aBlack">Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt="">Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</div><div class="footermid"><a href="http://m.php.cn/de/about/us.html">Über uns</a><a href="http://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="http://m.php.cn/de/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>