JQuery et HTML+CSS implémentent le clic de souris pour déclencher des feux d'artifice-js tutoriel-php.cn

4 Code des effets spéciaux des feux d'artifice HTML5</ titre> 5 6 <"/><meta property="og:local" content="fr"> <meta property="og:title" content="JQuery et HTML+CSS implémentent le clic de souris pour déclencher des feux d'artifice-js tutoriel-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>Code des effets spéciaux des feux d'artifice HTML5</ titre> 5 6 <"> <meta property="og:url" content="https://m.php.cn/fr/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/fr/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/fr/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:'Voir plus', FoldUp:'Replier', Choice:'langue', wait:'Chargement, veuillez patienter ~', LoginFirst:"S'il vous plait Connectez-vous d'abord", needKeyword:'Entrez la recherche par mot-clé', emailPhoneError:'Veuillez saisir le bon numéro de téléphone ou l'adresse e-mail', missPwd:'S'il vous plaît entrer le mot de passe', emailError:'Veuillez entrer votre adresse e-mail correcte', VerCode:"entrez le code de vérification S'il vous plait", getCode:'Envoi en cours', pwdError:'Format de mot de passe incorrect', TwoPassNotMatch:'Deux mots de passe ne correspondent pas', Bindemail:'Lier un e-mail', resetpassword:'réinitialiser le mot de passe', ConfirmPass:'Confirmez le mot de passe', pwdCheck:'Veuillez saisir 6 à 18 lettres ou chiffres', Editinfor: 'Modifier les informations personnelles', trimContent:'Veuillez saisir le contenu', titleCheck:'Le titre doit contenir au moins 5 mots', choiceLang:'Veuillez sélectionner une classification linguistique', Secondreply:'répondre', NetWorkError:'Erreur réseau, veuillez réessayer plus tard !', keywordSearch:'Entrez la recherche par mot-clé', all_lang_string:'zh|en|zh-tw|ja|ko|ms|fr|de', Next:'Suivant', Previous:'Précédent' }; </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 et HTML+CSS implémentent le clic de souris pour déclencher des feux d'artifice","description":"1 <!DOCTYPE html> 2 <html> 3 <head><meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\"> 4 <title>Code des effets spéciaux des feux d'artifice HTML5<\/ titre> 5 6 <","datePublished":"2017-06-20T09:36:00+8:00","author":{"url":"http:\/\/m.php.cn\/fr\/member\/1.html","name":"PHP中文网"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/m.php.cn\/fr\/faq\/369620.html"},"url":"https:\/\/m.php.cn\/fr\/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>\nChers internautes ! Parce que ceci a été envoyé par le professeur pendant les vacances ! Donc je ne comprends pas certaines choses, je suis vraiment désolée. Si vous ne comprenez rien, laissez-moi un message ! J'irai voir mon ancien professeur et je demanderai à Ask, même s'il est à la retraite depuis longtemps !!<\/p>"}</script><script type="application/ld+json"> [ { "@context":"https://schema.org", "@type":"BreadcrumbList", "itemListElement":[ { "@type":"ListItem", "position":1, "item":{"@id":"http://m.php.cn/fr/", "name":"Maison"} } ,{ "@type":"ListItem", "position":2, "item":{"@id":"http://m.php.cn/fr/article.html", "name":"Articles techniques"} } ,{ "@type":"ListItem", "position":3, "item":{"@id":"http://m.php.cn/fr/web-designer.html", "name":"interface Web"} } ,{ "@type":"ListItem", "position":4, "item":{"@id":"http://m.php.cn/fr/faq/369620.html", "name":"JQuery et HTML+CSS implémentent le clic de souris pour déclencher des feux d'artifice"} } ] } ] </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/fr/" title="Site Web PHP chinois" class="haed_logo_a"><img src="/static/imghwm/logo.png" alt="Site Web PHP chinois" 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('fr')"/><a onclick="searchs('fr')" href="javascript:;" title="recherche"><img onerror="this.onerror=''; this.src='static/imghwm/default1.png'" src="/static/imghwm/find.png" alt="recherche"></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">communauté</div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/fr/article.html" title="Articles">Articles</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/fr/faq/zt" title="Sujets">Sujets</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/fr/wenda.html" title="Questions et réponses">Questions et réponses</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">Apprendre</div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/fr/course.html" title="Cours">Cours</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/fr/dic/" title="Dictionnaire de programmation">Dictionnaire de programmation</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">Bibliothèque d'outils</div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/fr/toolset/development-tools" title="Outils de développement">Outils de développement</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/fr/toolset/website-source-code" title="Code source du site Web">Code source du site Web</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/fr/toolset/php-libraries" title="Bibliothèques PHP">Bibliothèques PHP</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/fr/toolset/js-special-effects" title="Effets spéciaux JS">Effets spéciaux JS</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/fr/toolset/website-materials" title="Matériel du site Web">Matériel du site Web</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/fr/toolset/extension-plug-ins" title="Plugins d'extension">Plugins d'extension</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">Loisirs</div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/fr/game" title="Téléchargement du jeu">Téléchargement du jeu</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/fr/mobile-game-tutorial/" title="Tutoriels de jeu">Tutoriels de jeu</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/fr/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">Français</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:;" 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/fr/" title="Maison" class="bBlack">Maison</a> > <a href="http://m.php.cn/fr/article.html" title="Article" class="bBlack">Article</a> > <a href="http://m.php.cn/fr/web-designer.html" class="cBlack">interface Web</a> > JQuery et HTML+CSS implémentent le clic de souris pour déclencher des feux d'artifice<div class="clear"></div></div></div><div class="nphpQianBox"><div class="nphpQianTitle"><h1>JQuery et HTML+CSS implémentent le clic de souris pour déclencher des feux d'artifice</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:001517parcourir<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> Chers internautes ! Parce que ceci a été envoyé par le professeur pendant les vacances ! Donc je ne comprends pas certaines choses, je suis vraiment désolée. Si vous ne comprenez rien, laissez-moi un message ! J'irai voir mon ancien professeur et je demanderai à Ask, même s'il est à la retraite depuis longtemps !!Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!</div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng">Déclaration：<div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div></div></div><div class="nphpSytBox">Article précédent：<a class="dBlack" title="Comment utiliser la liaison d'événements JavaScript" href="http://m.php.cn/fr/faq/369618.html">Comment utiliser la liaison d'événements JavaScript</a>Article suivant：<a class="dBlack" title="Comment utiliser la liaison d'événements JavaScript" href="http://m.php.cn/fr/faq/369622.html">Comment utiliser la liaison d'événements JavaScript</a></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><a href="http://m.php.cn/fr/article.html" class="bBlack">Voir plus</a><div class="clear"></div></div><ul class="nphpXgwzList"><li><a href="http://m.php.cn/fr/faq/1609.html" title="Une analyse approfondie du composant de groupe de liste Bootstrap" class="aBlack">Une analyse approfondie du composant de groupe de liste Bootstrap</a><div class="clear"></div></li><li><a href="http://m.php.cn/fr/faq/1640.html" title="Explication détaillée du currying de la fonction JavaScript" class="aBlack">Explication détaillée du currying de la fonction JavaScript</a><div class="clear"></div></li><li><a href="http://m.php.cn/fr/faq/1949.html" title="Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)" class="aBlack">Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)</a><div class="clear"></div></li><li><a href="http://m.php.cn/fr/faq/2248.html" title="Angularjs intègre l'interface utilisateur WeChat (weui)" class="aBlack">Angularjs intègre l'interface utilisateur WeChat (weui)</a><div class="clear"></div></li><li><a href="http://m.php.cn/fr/faq/2351.html" title="Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript" class="aBlack">Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt="">Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</div><div class="footermid"><a href="http://m.php.cn/fr/about/us.html">À propos de nous</a><a href="http://m.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a><a href="http://m.php.cn/fr/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>