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

<span style="color: #008080">  1</span> <!DOCTYPE html>
<span style="color: #008080">  2</span> <html>
<span style="color: #008080">  3</span> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<span style="color: #008080">  4</span>     <title>HTML5烟花燃放特效代码</title>
<span style="color: #008080">  5</span> 
<span style="color: #008080">  6</span>     <style>
<span style="color: #008080">  7</span>         html,body{height:100%;margin:0;padding:0<span style="color: #000000">}
</span><span style="color: #008080">  8</span>         ul,li{text-indent:0;text-decoration:none;margin:0;padding:0<span style="color: #000000">}
</span><span style="color: #008080">  9</span>         img{border:0<span style="color: #000000">}
</span><span style="color: #008080"> 10</span>         body{background-color:#000;color:#999;font:100%/18px helvetica, arial, sans-serif}
<span style="color: #008080"> 11</span>         canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20<span style="color: #000000">}
</span><span style="color: #008080"> 12</span>         *<span style="color: #000000">{
</span><span style="color: #008080"> 13</span> <span style="color: #000000">            margin: 0px;
</span><span style="color: #008080"> 14</span> <span style="color: #000000">            padding: 0px;
</span><span style="color: #008080"> 15</span> <span style="color: #000000">        }
</span><span style="color: #008080"> 16</span> <span style="color: #000000">        #bg_Img{
</span><span style="color: #008080"> 17</span> <span style="color: #000000">            width: 1920px;
</span><span style="color: #008080"> 18</span> <span style="color: #000000">            height: 1500px;
</span><span style="color: #008080"> 19</span> <span style="color: #000000">            border: 1px solid transparent;
</span><span style="color: #008080"> 20</span>             background: url("start.gif"<span style="color: #000000">) repeat;
</span><span style="color: #008080"> 21</span>             text-<span style="color: #000000">align: center;
</span><span style="color: #008080"> 22</span> <span style="color: #000000">        }
</span><span style="color: #008080"> 23</span> <span style="color: #000000">        ul{
</span><span style="color: #008080"> 24</span> <span style="color: #000000">            width: 5555px;
</span><span style="color: #008080"> 25</span> <span style="color: #000000">            height: 200px;
</span><span style="color: #008080"> 26</span> <span style="color: #000000">        }
</span><span style="color: #008080"> 27</span> <span style="color: #000000">        li{
</span><span style="color: #008080"> 28</span>             font: 120px/190px "楷体";
<span style="color: #008080"> 29</span> <span style="color: #000000">            color: white;
</span><span style="color: #008080"> 30</span>             text-<span style="color: #000000">shadow: 5px 10px 10px 10px;
</span><span style="color: #008080"> 31</span>             list-<span style="color: #000000">style: none;
</span><span style="color: #008080"> 32</span>             <span style="color: #0000ff">float</span><span style="color: #000000">: left;
</span><span style="color: #008080"> 33</span> <span style="color: #000000">            display: none;
</span><span style="color: #008080"> 34</span> <span style="color: #000000">        }
</span><span style="color: #008080"> 35</span> <span style="color: #000000">        #text_bd{
</span><span style="color: #008080"> 36</span> <span style="color: #000000">            width: 600px;
</span><span style="color: #008080"> 37</span> <span style="color: #000000">            height: 200px;
</span><span style="color: #008080"> 38</span> <span style="color: #000000">            border: 5px solid transparent;
</span><span style="color: #008080"> 39</span>             margin-<span style="color: #000000">left: 200px;
</span><span style="color: #008080"> 40</span> <span style="color: #000000">        }
</span><span style="color: #008080"> 41</span> <span style="color: #000000">        #mouse_click{
</span><span style="color: #008080"> 42</span> <span style="color: #000000">            margin: 0px auto;
</span><span style="color: #008080"> 43</span>             text-<span style="color: #000000">align: center;
</span><span style="color: #008080"> 44</span> <span style="color: #000000">            color: white;
</span><span style="color: #008080"> 45</span> <span style="color: #000000">        }
</span><span style="color: #008080"> 46</span>     </style>
<span style="color: #008080"> 47</span> 
<span style="color: #008080"> 48</span> </head>
<span style="color: #008080"> 49</span> <body>
<span style="color: #008080"> 50</span> <div id="bg_Img">
<span style="color: #008080"> 51</span>     <div id="text_bd">
<span style="color: #008080"> 52</span>         <ul>
<span style="color: #008080"> 53</span>             <li>O(∩_∩)O~~</li>
<span style="color: #008080"> 54</span>             <li>同</li>
<span style="color: #008080"> 55</span>              <li>学</li>
<span style="color: #008080"> 56</span>             <li>们</li>
<span style="color: #008080"> 57</span>             <li>节</li>
<span style="color: #008080"> 58</span>             <li>日</li>
<span style="color: #008080"> 59</span>             <li>快</li>
<span style="color: #008080"> 60</span>             <li>乐</li>
<span style="color: #008080"> 61</span>             <li>~~</li>
<span style="color: #008080"> 62</span>         </ul>
<span style="color: #008080"> 63</span>     </div>
<span style="color: #008080"> 64</span>     <div id="mouse_click">鼠标点击释放烟花效果</div>
<span style="color: #008080"> 65</span> </div>
<span style="color: #008080"> 66</span> <script type="text/javascript" src="jquery-3.1.1.js"></script>
<span style="color: #008080"> 67</span> <script type="text/javascript">
<span style="color: #008080"> 68</span>     <span style="color: #0000ff">var</span> aLi=document.querySelectorAll("li"<span style="color: #000000">);
</span><span style="color: #008080"> 69</span>     setInterval(a,1000<span style="color: #000000">);
</span><span style="color: #008080"> 70</span>     setInterval(b,2000<span style="color: #000000">);
</span><span style="color: #008080"> 71</span>     setInterval(c,3000<span style="color: #000000">);
</span><span style="color: #008080"> 72</span>     setInterval(d,4000<span style="color: #000000">);
</span><span style="color: #008080"> 73</span>     setInterval(e,5000<span style="color: #000000">);
</span><span style="color: #008080"> 74</span>     setInterval(f,6000<span style="color: #000000">);
</span><span style="color: #008080"> 75</span>     setInterval(g,7000<span style="color: #000000">);
</span><span style="color: #008080"> 76</span>     setInterval(h,8000<span style="color: #000000">);
</span><span style="color: #008080"> 77</span>     <span style="color: #0000ff">function</span><span style="color: #000000"> a() {
</span><span style="color: #008080"> 78</span>         aLi[0].style.display = "block"
<span style="color: #008080"> 79</span> <span style="color: #000000">    }
</span><span style="color: #008080"> 80</span>     <span style="color: #0000ff">function</span><span style="color: #000000"> b() {
</span><span style="color: #008080"> 81</span>         aLi[1].style.display = "block"
<span style="color: #008080"> 82</span> <span style="color: #000000">    }
</span><span style="color: #008080"> 83</span>     <span style="color: #0000ff">function</span><span style="color: #000000"> c() {
</span><span style="color: #008080"> 84</span>         aLi[2].style.display = "block"
<span style="color: #008080"> 85</span> <span style="color: #000000">    }
</span><span style="color: #008080"> 86</span>     <span style="color: #0000ff">function</span><span style="color: #000000"> d() {
</span><span style="color: #008080"> 87</span>         aLi[3].style.display = "block"
<span style="color: #008080"> 88</span> <span style="color: #000000">    }
</span><span style="color: #008080"> 89</span>     <span style="color: #0000ff">function</span><span style="color: #000000"> e() {
</span><span style="color: #008080"> 90</span>         aLi[4].style.display = "block"
<span style="color: #008080"> 91</span> <span style="color: #000000">    }
</span><span style="color: #008080"> 92</span>     <span style="color: #0000ff">function</span><span style="color: #000000"> f() {
</span><span style="color: #008080"> 93</span>         aLi[5].style.display = "block"
<span style="color: #008080"> 94</span> <span style="color: #000000">    }
</span><span style="color: #008080"> 95</span>     <span style="color: #0000ff">function</span><span style="color: #000000"> g() {
</span><span style="color: #008080"> 96</span>         aLi[6].style.display = "block"
<span style="color: #008080"> 97</span> <span style="color: #000000">    }
</span><span style="color: #008080"> 98</span>     <span style="color: #0000ff">function</span><span style="color: #000000"> h() {
</span><span style="color: #008080"> 99</span>         aLi[7].style.display = "block"
<span style="color: #008080">100</span> <span style="color: #000000">    }
</span><span style="color: #008080">101</span>     $(<span style="color: #0000ff">function</span><span style="color: #000000">(){
</span><span style="color: #008080">102</span>         <span style="color: #0000ff">var</span> Fireworks = <span style="color: #0000ff">function</span><span style="color: #000000">(){
</span><span style="color: #008080">103</span>             <span style="color: #0000ff">var</span> self = <span style="color: #0000ff">this</span><span style="color: #000000">;
</span><span style="color: #008080">104</span>             <span style="color: #0000ff">var</span> rand = <span style="color: #0000ff">function</span>(rMi, rMa){<span style="color: #0000ff">return</span> ~~((Math.random()*(rMa-rMi+1))+<span style="color: #000000">rMi);}
</span><span style="color: #008080">105</span>             <span style="color: #0000ff">var</span> hitTest = <span style="color: #0000ff">function</span>(x1, y1, w1, h1, x2, y2, w2, h2){<span style="color: #0000ff">return</span> !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 <<span style="color: #000000"> y1);};
</span><span style="color: #008080">106</span>             window.requestAnimFrame=<span style="color: #0000ff">function</span>(){<span style="color: #0000ff">return</span> window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||<span style="color: #0000ff">function</span>(a){window.setTimeout(a,1E3/60)}}();
<span style="color: #008080">107</span> 
<span style="color: #008080">108</span>             self.init = <span style="color: #0000ff">function</span><span style="color: #000000">(){
</span><span style="color: #008080">109</span>                 self.canvas = document.createElement('canvas'<span style="color: #000000">);
</span><span style="color: #008080">110</span>                 self.canvas.width = self.cw =<span style="color: #000000"> $(window).innerWidth();
</span><span style="color: #008080">111</span>                 self.canvas.height = self.ch =<span style="color: #000000"> $(window).innerHeight();
</span><span style="color: #008080">112</span>                 self.particles =<span style="color: #000000"> [];
</span><span style="color: #008080">113</span>                 self.partCount = 150<span style="color: #000000">;
</span><span style="color: #008080">114</span>                 self.fireworks =<span style="color: #000000"> [];
</span><span style="color: #008080">115</span>                 self.mx = self.cw/2;
<span style="color: #008080">116</span>                 self.my = self.ch/2;
<span style="color: #008080">117</span>                 self.currentHue = 30<span style="color: #000000">;
</span><span style="color: #008080">118</span>                 self.partSpeed = 5<span style="color: #000000">;
</span><span style="color: #008080">119</span>                 self.partSpeedVariance = 10<span style="color: #000000">;
</span><span style="color: #008080">120</span>                 self.partWind = 50<span style="color: #000000">;
</span><span style="color: #008080">121</span>                 self.partFriction = 5<span style="color: #000000">;
</span><span style="color: #008080">122</span>                 self.partGravity = 1<span style="color: #000000">;
</span><span style="color: #008080">123</span>                 self.hueMin = 0<span style="color: #000000">;
</span><span style="color: #008080">124</span>                 self.hueMax = 360<span style="color: #000000">;
</span><span style="color: #008080">125</span>                 self.fworkSpeed = 4<span style="color: #000000">;
</span><span style="color: #008080">126</span>                 self.fworkAccel = 10<span style="color: #000000">;
</span><span style="color: #008080">127</span>                 self.hueVariance = 30<span style="color: #000000">;
</span><span style="color: #008080">128</span>                 self.flickerDensity = 25<span style="color: #000000">;
</span><span style="color: #008080">129</span>                 self.showShockwave = <span style="color: #0000ff">true</span><span style="color: #000000">;
</span><span style="color: #008080">130</span>                 self.showTarget = <span style="color: #0000ff">false</span><span style="color: #000000">;
</span><span style="color: #008080">131</span>                 self.clearAlpha = 25<span style="color: #000000">;
</span><span style="color: #008080">132</span> 
<span style="color: #008080">133</span> <span style="color: #000000">                $(document.body).append(self.canvas);
</span><span style="color: #008080">134</span>                 self.ctx = self.canvas.getContext('2d'<span style="color: #000000">);
</span><span style="color: #008080">135</span>                 self.ctx.lineCap = 'round'<span style="color: #000000">;
</span><span style="color: #008080">136</span>                 self.ctx.lineJoin = 'round'<span style="color: #000000">;
</span><span style="color: #008080">137</span>                 self.lineWidth = 1<span style="color: #000000">;
</span><span style="color: #008080">138</span> <span style="color: #000000">                self.bindEvents();
</span><span style="color: #008080">139</span> <span style="color: #000000">                self.canvasLoop();
</span><span style="color: #008080">140</span> 
<span style="color: #008080">141</span>                 self.canvas.onselectstart = <span style="color: #0000ff">function</span><span style="color: #000000">() {
</span><span style="color: #008080">142</span>                     <span style="color: #0000ff">return</span> <span style="color: #0000ff">false</span><span style="color: #000000">;
</span><span style="color: #008080">143</span> <span style="color: #000000">                };
</span><span style="color: #008080">144</span> <span style="color: #000000">            };
</span><span style="color: #008080">145</span> 
<span style="color: #008080">146</span>             self.createParticles = <span style="color: #0000ff">function</span><span style="color: #000000">(x,y, hue){
</span><span style="color: #008080">147</span>                 <span style="color: #0000ff">var</span> countdown =<span style="color: #000000"> self.partCount;
</span><span style="color: #008080">148</span>                 <span style="color: #0000ff">while</span>(countdown--<span style="color: #000000">){
</span><span style="color: #008080">149</span>                     <span style="color: #0000ff">var</span> newParticle =<span style="color: #000000"> {
</span><span style="color: #008080">150</span> <span style="color: #000000">                        x: x,
</span><span style="color: #008080">151</span> <span style="color: #000000">                        y: y,
</span><span style="color: #008080">152</span> <span style="color: #000000">                        coordLast: [
</span><span style="color: #008080">153</span> <span style="color: #000000">                            {x: x, y: y},
</span><span style="color: #008080">154</span> <span style="color: #000000">                            {x: x, y: y},
</span><span style="color: #008080">155</span> <span style="color: #000000">                            {x: x, y: y}
</span><span style="color: #008080">156</span> <span style="color: #000000">                        ],
</span><span style="color: #008080">157</span>                         angle: rand(0, 360<span style="color: #000000">),
</span><span style="color: #008080">158</span>                         speed: rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed +<span style="color: #000000"> self.partSpeedVariance)),
</span><span style="color: #008080">159</span>                         friction: 1 - self.partFriction/100,
<span style="color: #008080">160</span>                         gravity: self.partGravity/2,
<span style="color: #008080">161</span>                         hue: rand(hue-self.hueVariance, hue+<span style="color: #000000">self.hueVariance),
</span><span style="color: #008080">162</span>                         brightness: rand(50, 80<span style="color: #000000">),
</span><span style="color: #008080">163</span>                         alpha: rand(40,100)/100,
<span style="color: #008080">164</span>                         decay: rand(10, 50)/1000,
<span style="color: #008080">165</span>                         wind: (rand(0, self.partWind) - (self.partWind/2))/25<span style="color: #000000">,
</span><span style="color: #008080">166</span> <span style="color: #000000">                        lineWidth: self.lineWidth
</span><span style="color: #008080">167</span> <span style="color: #000000">                    };
</span><span style="color: #008080">168</span> <span style="color: #000000">                    self.particles.push(newParticle);
</span><span style="color: #008080">169</span> <span style="color: #000000">                }
</span><span style="color: #008080">170</span> <span style="color: #000000">            };
</span><span style="color: #008080">171</span> 
<span style="color: #008080">172</span> 
<span style="color: #008080">173</span>             self.updateParticles = <span style="color: #0000ff">function</span><span style="color: #000000">(){
</span><span style="color: #008080">174</span>                 <span style="color: #0000ff">var</span> i =<span style="color: #000000"> self.particles.length;
</span><span style="color: #008080">175</span>                 <span style="color: #0000ff">while</span>(i--<span style="color: #000000">){
</span><span style="color: #008080">176</span>                     <span style="color: #0000ff">var</span> p =<span style="color: #000000"> self.particles[i];
</span><span style="color: #008080">177</span>                     <span style="color: #0000ff">var</span> radians = p.angle * Math.PI / 180<span style="color: #000000">;
</span><span style="color: #008080">178</span>                     <span style="color: #0000ff">var</span> vx = Math.cos(radians) *<span style="color: #000000"> p.speed;
</span><span style="color: #008080">179</span>                     <span style="color: #0000ff">var</span> vy = Math.sin(radians) *<span style="color: #000000"> p.speed;
</span><span style="color: #008080">180</span>                     p.speed *=<span style="color: #000000"> p.friction;
</span><span style="color: #008080">181</span> 
<span style="color: #008080">182</span>                     p.coordLast[2].x = p.coordLast[1<span style="color: #000000">].x;
</span><span style="color: #008080">183</span>                     p.coordLast[2].y = p.coordLast[1<span style="color: #000000">].y;
</span><span style="color: #008080">184</span>                     p.coordLast[1].x = p.coordLast[0<span style="color: #000000">].x;
</span><span style="color: #008080">185</span>                     p.coordLast[1].y = p.coordLast[0<span style="color: #000000">].y;
</span><span style="color: #008080">186</span>                     p.coordLast[0].x =<span style="color: #000000"> p.x;
</span><span style="color: #008080">187</span>                     p.coordLast[0].y =<span style="color: #000000"> p.y;
</span><span style="color: #008080">188</span> 
<span style="color: #008080">189</span>                     p.x +=<span style="color: #000000"> vx;
</span><span style="color: #008080">190</span>                     p.y +=<span style="color: #000000"> vy;
</span><span style="color: #008080">191</span>                     p.y +=<span style="color: #000000"> p.gravity;
</span><span style="color: #008080">192</span> 
<span style="color: #008080">193</span>                     p.angle +=<span style="color: #000000"> p.wind;
</span><span style="color: #008080">194</span>                     p.alpha -=<span style="color: #000000"> p.decay;
</span><span style="color: #008080">195</span> 
<span style="color: #008080">196</span>                     <span style="color: #0000ff">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<span style="color: #000000">){
</span><span style="color: #008080">197</span>                         self.particles.splice(i, 1<span style="color: #000000">);
</span><span style="color: #008080">198</span> <span style="color: #000000">                    }
</span><span style="color: #008080">199</span> <span style="color: #000000">                };
</span><span style="color: #008080">200</span> <span style="color: #000000">            };
</span><span style="color: #008080">201</span> 
<span style="color: #008080">202</span>             self.drawParticles = <span style="color: #0000ff">function</span><span style="color: #000000">(){
</span><span style="color: #008080">203</span>                 <span style="color: #0000ff">var</span> i =<span style="color: #000000"> self.particles.length;
</span><span style="color: #008080">204</span>                 <span style="color: #0000ff">while</span>(i--<span style="color: #000000">){
</span><span style="color: #008080">205</span>                     <span style="color: #0000ff">var</span> p =<span style="color: #000000"> self.particles[i];
</span><span style="color: #008080">206</span> 
<span style="color: #008080">207</span>                     <span style="color: #0000ff">var</span> coordRand = (rand(1,3)-1<span style="color: #000000">);
</span><span style="color: #008080">208</span> <span style="color: #000000">                    self.ctx.beginPath();
</span><span style="color: #008080">209</span> <span style="color: #000000">                    self.ctx.moveTo(Math.round(p.coordLast[coordRand].x), Math.round(p.coordLast[coordRand].y));
</span><span style="color: #008080">210</span> <span style="color: #000000">                    self.ctx.lineTo(Math.round(p.x), Math.round(p.y));
</span><span style="color: #008080">211</span> <span style="color: #000000">                    self.ctx.closePath();
</span><span style="color: #008080">212</span>                     self.ctx.strokeStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+p.alpha+')'<span style="color: #000000">;
</span><span style="color: #008080">213</span> <span style="color: #000000">                    self.ctx.stroke();
</span><span style="color: #008080">214</span> 
<span style="color: #008080">215</span>                     <span style="color: #0000ff">if</span>(self.flickerDensity > 0<span style="color: #000000">){
</span><span style="color: #008080">216</span>                         <span style="color: #0000ff">var</span> inverseDensity = 50 -<span style="color: #000000"> self.flickerDensity;
</span><span style="color: #008080">217</span>                         <span style="color: #0000ff">if</span>(rand(0, inverseDensity) ===<span style="color: #000000"> inverseDensity){
</span><span style="color: #008080">218</span> <span style="color: #000000">                            self.ctx.beginPath();
</span><span style="color: #008080">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)
<span style="color: #008080">220</span> <span style="color: #000000">                            self.ctx.closePath();
</span><span style="color: #008080">221</span>                             <span style="color: #0000ff">var</span> randAlpha = rand(50,100)/100;
<span style="color: #008080">222</span>                             self.ctx.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+randAlpha+')'<span style="color: #000000">;
</span><span style="color: #008080">223</span> <span style="color: #000000">                            self.ctx.fill();
</span><span style="color: #008080">224</span> <span style="color: #000000">                        }
</span><span style="color: #008080">225</span> <span style="color: #000000">                    }
</span><span style="color: #008080">226</span> <span style="color: #000000">                };
</span><span style="color: #008080">227</span> <span style="color: #000000">            };
</span><span style="color: #008080">228</span> 
<span style="color: #008080">229</span> 
<span style="color: #008080">230</span>             self.createFireworks = <span style="color: #0000ff">function</span><span style="color: #000000">(startX, startY, targetX, targetY){
</span><span style="color: #008080">231</span>                 <span style="color: #0000ff">var</span> newFirework =<span style="color: #000000"> {
</span><span style="color: #008080">232</span> <span style="color: #000000">                    x: startX,
</span><span style="color: #008080">233</span> <span style="color: #000000">                    y: startY,
</span><span style="color: #008080">234</span> <span style="color: #000000">                    startX: startX,
</span><span style="color: #008080">235</span> <span style="color: #000000">                    startY: startY,
</span><span style="color: #008080">236</span>                     hitX: <span style="color: #0000ff">false</span><span style="color: #000000">,
</span><span style="color: #008080">237</span>                     hitY: <span style="color: #0000ff">false</span><span style="color: #000000">,
</span><span style="color: #008080">238</span> <span style="color: #000000">                    coordLast: [
</span><span style="color: #008080">239</span> <span style="color: #000000">                        {x: startX, y: startY},
</span><span style="color: #008080">240</span> <span style="color: #000000">                        {x: startX, y: startY},
</span><span style="color: #008080">241</span> <span style="color: #000000">                        {x: startX, y: startY}
</span><span style="color: #008080">242</span> <span style="color: #000000">                    ],
</span><span style="color: #008080">243</span> <span style="color: #000000">                    targetX: targetX,
</span><span style="color: #008080">244</span> <span style="color: #000000">                    targetY: targetY,
</span><span style="color: #008080">245</span> <span style="color: #000000">                    speed: self.fworkSpeed,
</span><span style="color: #008080">246</span>                     angle: Math.atan2(targetY - startY, targetX -<span style="color: #000000"> startX),
</span><span style="color: #008080">247</span>                     shockwaveAngle: Math.atan2(targetY - startY, targetX - startX)+(90*(Math.PI/180)),
<span style="color: #008080">248</span>                     acceleration: self.fworkAccel/100,
<span style="color: #008080">249</span> <span style="color: #000000">                    hue: self.currentHue,
</span><span style="color: #008080">250</span>                     brightness: rand(50, 80<span style="color: #000000">),
</span><span style="color: #008080">251</span>                     alpha: rand(50,100)/100,
<span style="color: #008080">252</span> <span style="color: #000000">                    lineWidth: self.lineWidth
</span><span style="color: #008080">253</span> <span style="color: #000000">                };
</span><span style="color: #008080">254</span> <span style="color: #000000">                self.fireworks.push(newFirework);
</span><span style="color: #008080">255</span> 
<span style="color: #008080">256</span> <span style="color: #000000">            };
</span><span style="color: #008080">257</span> 
<span style="color: #008080">258</span> 
<span style="color: #008080">259</span>             self.updateFireworks = <span style="color: #0000ff">function</span><span style="color: #000000">(){
</span><span style="color: #008080">260</span>                 <span style="color: #0000ff">var</span> i =<span style="color: #000000"> self.fireworks.length;
</span><span style="color: #008080">261</span> 
<span style="color: #008080">262</span>                 <span style="color: #0000ff">while</span>(i--<span style="color: #000000">){
</span><span style="color: #008080">263</span>                     <span style="color: #0000ff">var</span> f =<span style="color: #000000"> self.fireworks[i];
</span><span style="color: #008080">264</span>                     self.ctx.lineWidth =<span style="color: #000000"> f.lineWidth;
</span><span style="color: #008080">265</span> 
<span style="color: #008080">266</span>                     vx = Math.cos(f.angle) *<span style="color: #000000"> f.speed,
</span><span style="color: #008080">267</span>                             vy = Math.sin(f.angle) *<span style="color: #000000"> f.speed;
</span><span style="color: #008080">268</span>                     f.speed *= 1 +<span style="color: #000000"> f.acceleration;
</span><span style="color: #008080">269</span>                     f.coordLast[2].x = f.coordLast[1<span style="color: #000000">].x;
</span><span style="color: #008080">270</span>                     f.coordLast[2].y = f.coordLast[1<span style="color: #000000">].y;
</span><span style="color: #008080">271</span>                     f.coordLast[1].x = f.coordLast[0<span style="color: #000000">].x;
</span><span style="color: #008080">272</span>                     f.coordLast[1].y = f.coordLast[0<span style="color: #000000">].y;
</span><span style="color: #008080">273</span>                     f.coordLast[0].x =<span style="color: #000000"> f.x;
</span><span style="color: #008080">274</span>                     f.coordLast[0].y =<span style="color: #000000"> f.y;
</span><span style="color: #008080">275</span> 
<span style="color: #008080">276</span>                     <span style="color: #0000ff">if</span>(f.startX >=<span style="color: #000000"> f.targetX){
</span><span style="color: #008080">277</span>                         <span style="color: #0000ff">if</span>(f.x + vx <=<span style="color: #000000"> f.targetX){
</span><span style="color: #008080">278</span>                             f.x =<span style="color: #000000"> f.targetX;
</span><span style="color: #008080">279</span>                             f.hitX = <span style="color: #0000ff">true</span><span style="color: #000000">;
</span><span style="color: #008080">280</span>                         } <span style="color: #0000ff">else</span><span style="color: #000000"> {
</span><span style="color: #008080">281</span>                             f.x +=<span style="color: #000000"> vx;
</span><span style="color: #008080">282</span> <span style="color: #000000">                        }
</span><span style="color: #008080">283</span>                     } <span style="color: #0000ff">else</span><span style="color: #000000"> {
</span><span style="color: #008080">284</span>                         <span style="color: #0000ff">if</span>(f.x + vx >=<span style="color: #000000"> f.targetX){
</span><span style="color: #008080">285</span>                             f.x =<span style="color: #000000"> f.targetX;
</span><span style="color: #008080">286</span>                             f.hitX = <span style="color: #0000ff">true</span><span style="color: #000000">;
</span><span style="color: #008080">287</span>                         } <span style="color: #0000ff">else</span><span style="color: #000000"> {
</span><span style="color: #008080">288</span>                             f.x +=<span style="color: #000000"> vx;
</span><span style="color: #008080">289</span> <span style="color: #000000">                        }
</span><span style="color: #008080">290</span> <span style="color: #000000">                    }
</span><span style="color: #008080">291</span> 
<span style="color: #008080">292</span>                     <span style="color: #0000ff">if</span>(f.startY >=<span style="color: #000000"> f.targetY){
</span><span style="color: #008080">293</span>                         <span style="color: #0000ff">if</span>(f.y + vy <=<span style="color: #000000"> f.targetY){
</span><span style="color: #008080">294</span>                             f.y =<span style="color: #000000"> f.targetY;
</span><span style="color: #008080">295</span>                             f.hitY = <span style="color: #0000ff">true</span><span style="color: #000000">;
</span><span style="color: #008080">296</span>                         } <span style="color: #0000ff">else</span><span style="color: #000000"> {
</span><span style="color: #008080">297</span>                             f.y +=<span style="color: #000000"> vy;
</span><span style="color: #008080">298</span> <span style="color: #000000">                        }
</span><span style="color: #008080">299</span>                     } <span style="color: #0000ff">else</span><span style="color: #000000"> {
</span><span style="color: #008080">300</span>                         <span style="color: #0000ff">if</span>(f.y + vy >=<span style="color: #000000"> f.targetY){
</span><span style="color: #008080">301</span>                             f.y =<span style="color: #000000"> f.targetY;
</span><span style="color: #008080">302</span>                             f.hitY = <span style="color: #0000ff">true</span><span style="color: #000000">;
</span><span style="color: #008080">303</span>                         } <span style="color: #0000ff">else</span><span style="color: #000000"> {
</span><span style="color: #008080">304</span>                             f.y +=<span style="color: #000000"> vy;
</span><span style="color: #008080">305</span> <span style="color: #000000">                        }
</span><span style="color: #008080">306</span> <span style="color: #000000">                    }
</span><span style="color: #008080">307</span> 
<span style="color: #008080">308</span>                     <span style="color: #0000ff">if</span>(f.hitX &&<span style="color: #000000"> f.hitY){
</span><span style="color: #008080">309</span> <span style="color: #000000">                        self.createParticles(f.targetX, f.targetY, f.hue);
</span><span style="color: #008080">310</span>                         self.fireworks.splice(i, 1<span style="color: #000000">);
</span><span style="color: #008080">311</span> 
<span style="color: #008080">312</span> <span style="color: #000000">                    }
</span><span style="color: #008080">313</span> <span style="color: #000000">                };
</span><span style="color: #008080">314</span> <span style="color: #000000">            };
</span><span style="color: #008080">315</span> 
<span style="color: #008080">316</span>             self.drawFireworks = <span style="color: #0000ff">function</span><span style="color: #000000">(){
</span><span style="color: #008080">317</span>                 <span style="color: #0000ff">var</span> i =<span style="color: #000000"> self.fireworks.length;
</span><span style="color: #008080">318</span>                 self.ctx.globalCompositeOperation = 'lighter'<span style="color: #000000">;
</span><span style="color: #008080">319</span>                 <span style="color: #0000ff">while</span>(i--<span style="color: #000000">){
</span><span style="color: #008080">320</span>                     <span style="color: #0000ff">var</span> f =<span style="color: #000000"> self.fireworks[i];
</span><span style="color: #008080">321</span>                     self.ctx.lineWidth =<span style="color: #000000"> f.lineWidth;
</span><span style="color: #008080">322</span> 
<span style="color: #008080">323</span>                     <span style="color: #0000ff">var</span> coordRand = (rand(1,3)-1<span style="color: #000000">);
</span><span style="color: #008080">324</span> <span style="color: #000000">                    self.ctx.beginPath();
</span><span style="color: #008080">325</span> <span style="color: #000000">                    self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[coordRand].y));
</span><span style="color: #008080">326</span> <span style="color: #000000">                    self.ctx.lineTo(Math.round(f.x), Math.round(f.y));
</span><span style="color: #008080">327</span> <span style="color: #000000">                    self.ctx.closePath();
</span><span style="color: #008080">328</span>                     self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+f.alpha+')'<span style="color: #000000">;
</span><span style="color: #008080">329</span> <span style="color: #000000">                    self.ctx.stroke();
</span><span style="color: #008080">330</span> 
<span style="color: #008080">331</span>                     <span style="color: #0000ff">if</span><span style="color: #000000">(self.showTarget){
</span><span style="color: #008080">332</span> <span style="color: #000000">                        self.ctx.save();
</span><span style="color: #008080">333</span> <span style="color: #000000">                        self.ctx.beginPath();
</span><span style="color: #008080">334</span>                         self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(1,8), 0, Math.PI*2, <span style="color: #0000ff">false</span><span style="color: #000000">)
</span><span style="color: #008080">335</span> <span style="color: #000000">                        self.ctx.closePath();
</span><span style="color: #008080">336</span>                         self.ctx.lineWidth = 1<span style="color: #000000">;
</span><span style="color: #008080">337</span> <span style="color: #000000">                        self.ctx.stroke();
</span><span style="color: #008080">338</span> <span style="color: #000000">                        self.ctx.restore();
</span><span style="color: #008080">339</span> <span style="color: #000000">                    }
</span><span style="color: #008080">340</span> 
<span style="color: #008080">341</span>                     <span style="color: #0000ff">if</span><span style="color: #000000">(self.showShockwave){
</span><span style="color: #008080">342</span> <span style="color: #000000">                        self.ctx.save();
</span><span style="color: #008080">343</span> <span style="color: #000000">                        self.ctx.translate(Math.round(f.x), Math.round(f.y));
</span><span style="color: #008080">344</span> <span style="color: #000000">                        self.ctx.rotate(f.shockwaveAngle);
</span><span style="color: #008080">345</span> <span style="color: #000000">                        self.ctx.beginPath();
</span><span style="color: #008080">346</span>                         self.ctx.arc(0, 0, 1*(f.speed/5), 0, Math.PI, true);
<span style="color: #008080">347</span>                         self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+rand(25, 60)/100+')';
<span style="color: #008080">348</span>                         self.ctx.lineWidth =<span style="color: #000000"> f.lineWidth;
</span><span style="color: #008080">349</span> <span style="color: #000000">                        self.ctx.stroke();
</span><span style="color: #008080">350</span> <span style="color: #000000">                        self.ctx.restore();
</span><span style="color: #008080">351</span> <span style="color: #000000">                    }
</span><span style="color: #008080">352</span> <span style="color: #000000">                };
</span><span style="color: #008080">353</span> <span style="color: #000000">            };
</span><span style="color: #008080">354</span> 
<span style="color: #008080">355</span>             self.bindEvents = <span style="color: #0000ff">function</span><span style="color: #000000">(){
</span><span style="color: #008080">356</span>                 $(window).on('resize', <span style="color: #0000ff">function</span><span style="color: #000000">(){
</span><span style="color: #008080">357</span> <span style="color: #000000">                    clearTimeout(self.timeout);
</span><span style="color: #008080">358</span>                     self.timeout = setTimeout(<span style="color: #0000ff">function</span><span style="color: #000000">() {
</span><span style="color: #008080">359</span>                         self.canvas.width = self.cw =<span style="color: #000000"> $(window).innerWidth();
</span><span style="color: #008080">360</span>                         self.canvas.height = self.ch =<span style="color: #000000"> $(window).innerHeight();
</span><span style="color: #008080">361</span>                         self.ctx.lineCap = 'round'<span style="color: #000000">;
</span><span style="color: #008080">362</span>                         self.ctx.lineJoin = 'round'<span style="color: #000000">;
</span><span style="color: #008080">363</span>                     }, 100<span style="color: #000000">);
</span><span style="color: #008080">364</span> <span style="color: #000000">                });
</span><span style="color: #008080">365</span> 
<span style="color: #008080">366</span>                 $(self.canvas).on('mousedown', <span style="color: #0000ff">function</span><span style="color: #000000">(e){
</span><span style="color: #008080">367</span>                     self.mx = e.pageX -<span style="color: #000000"> self.canvas.offsetLeft;
</span><span style="color: #008080">368</span>                     self.my = e.pageY -<span style="color: #000000"> self.canvas.offsetTop;
</span><span style="color: #008080">369</span>                     self.currentHue =<span style="color: #000000"> rand(self.hueMin, self.hueMax);
</span><span style="color: #008080">370</span>                     self.createFireworks(self.cw/2, self.ch, self.mx, self.my);
<span style="color: #008080">371</span> 
<span style="color: #008080">372</span>                     $(self.canvas).on('mousemove.fireworks', <span style="color: #0000ff">function</span><span style="color: #000000">(e){
</span><span style="color: #008080">373</span>                         self.mx = e.pageX -<span style="color: #000000"> self.canvas.offsetLeft;
</span><span style="color: #008080">374</span>                         self.my = e.pageY -<span style="color: #000000"> self.canvas.offsetTop;
</span><span style="color: #008080">375</span>                         self.currentHue =<span style="color: #000000"> rand(self.hueMin, self.hueMax);
</span><span style="color: #008080">376</span>                         self.createFireworks(self.cw/2, self.ch, self.mx, self.my);
<span style="color: #008080">377</span> <span style="color: #000000">                    });
</span><span style="color: #008080">378</span> <span style="color: #000000">                });
</span><span style="color: #008080">379</span> 
<span style="color: #008080">380</span>                 $(self.canvas).on('mouseup', <span style="color: #0000ff">function</span><span style="color: #000000">(e){
</span><span style="color: #008080">381</span>                     $(self.canvas).off('mousemove.fireworks'<span style="color: #000000">);
</span><span style="color: #008080">382</span> <span style="color: #000000">                });
</span><span style="color: #008080">383</span> 
<span style="color: #008080">384</span> <span style="color: #000000">            }
</span><span style="color: #008080">385</span> 
<span style="color: #008080">386</span>             self.clear = <span style="color: #0000ff">function</span><span style="color: #000000">(){
</span><span style="color: #008080">387</span>                 self.particles =<span style="color: #000000"> [];
</span><span style="color: #008080">388</span>                 self.fireworks =<span style="color: #000000"> [];
</span><span style="color: #008080">389</span>                 self.ctx.clearRect(0, 0<span style="color: #000000">, self.cw, self.ch);
</span><span style="color: #008080">390</span> <span style="color: #000000">            };
</span><span style="color: #008080">391</span> 
<span style="color: #008080">392</span> 
<span style="color: #008080">393</span>             self.canvasLoop = <span style="color: #0000ff">function</span><span style="color: #000000">(){
</span><span style="color: #008080">394</span> <span style="color: #000000">                requestAnimFrame(self.canvasLoop, self.canvas);
</span><span style="color: #008080">395</span>                 self.ctx.globalCompositeOperation = 'destination-out'<span style="color: #000000">;
</span><span style="color: #008080">396</span>                 self.ctx.fillStyle = 'rgba(0,0,0,'+self.clearAlpha/100+')';
<span style="color: #008080">397</span>                 self.ctx.fillRect(0,0<span style="color: #000000">,self.cw,self.ch);
</span><span style="color: #008080">398</span> <span style="color: #000000">                self.updateFireworks();
</span><span style="color: #008080">399</span> <span style="color: #000000">                self.updateParticles();
</span><span style="color: #008080">400</span> <span style="color: #000000">                self.drawFireworks();
</span><span style="color: #008080">401</span> <span style="color: #000000">                self.drawParticles();
</span><span style="color: #008080">402</span> 
<span style="color: #008080">403</span> <span style="color: #000000">            };
</span><span style="color: #008080">404</span> 
<span style="color: #008080">405</span> <span style="color: #000000">            self.init();
</span><span style="color: #008080">406</span> 
<span style="color: #008080">407</span> <span style="color: #000000">        }
</span><span style="color: #008080">408</span>         <span style="color: #0000ff">var</span> fworks = <span style="color: #0000ff">new</span><span style="color: #000000"> Fireworks();
</span><span style="color: #008080">409</span> 
<span style="color: #008080">410</span> <span style="color: #000000">    });
</span><span style="color: #008080">411</span> 
<span style="color: #008080">412</span> </script>
<span style="color: #008080">413</span> 
<span style="color: #008080">414</span> </body>
<span style="color: #008080">415</span> </html>
Nach dem Login kopieren
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!