JQuery和html+css实现鼠标点击放烟花
css
html+css
jquery
capai
klik
tetikus
<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>Salin selepas log masuk
广大网友们!因为这是放假的时候老师给发的!所以我也看不太懂有些东西!实在是抱歉 有什么不明白的,就留言告诉我!我去找我曾经的老师问问,虽然他已经退休好久了!!
Atas ialah kandungan terperinci JQuery和html+css实现鼠标点击放烟花. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?
3 minggu yang lalu
By DDD
R.E.P.O. Simpan Fail Lokasi: Di manakah & bagaimana untuk melindunginya?
3 minggu yang lalu
By DDD
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Razer |. Tetikus tanpa wayar dan pad tetikus Pokémon Gengar kini tersedia, dengan harga ditetapkan 1,549 yuan
Jul 19, 2024 am 04:17 AM
Menurut berita dari laman web ini pada 12 Julai, Razer hari ini mengumumkan pelancaran pad tetikus dan tetikus tanpa wayar Razer|Pokémon Gengar. Harga produk tunggal ialah 1,299 yuan dan 299 yuan, dan harga pakej termasuk kedua-dua produk ialah 1,549 yuan. Ini bukan kali pertama Razer melancarkan produk persisian jenama bersama Gengar pada 2023, Razer melancarkan tetikus permainan Yamata Orochi V2 gaya Gengar. Kedua-dua produk baharu yang dilancarkan kali ini semuanya menggunakan latar belakang ungu gelap yang serupa dengan penampilan keluarga Ghost, Ghost, dan Gengar Mereka dicetak dengan garis besar tiga Pokémon dan Poké Balls ini, dengan watak Gengar di tengah imej besar dan berwarna-warni Pokémon jenis hantu klasik. Laman web ini mendapati bahawa tetikus tanpa wayar Razer|Pokémon Gengar adalah berdasarkan Viper V3 Edisi Profesional yang dikeluarkan sebelum ini. Berat keseluruhannya ialah 55g dan dilengkapi dengan FOC generasi kedua Razer
Produk siri papan kekunci dan tetikus 'Elden's Circle' jenama bersama VGN kini berada di rak: Tema tersuai Lani / Faded One, bermula dari 99 yuan
Aug 12, 2024 pm 10:45 PM
Menurut berita dari laman web ini pada 12 Ogos, VGN melancarkan siri papan kekunci dan tetikus "Elden Ring" berjenama bersama pada 6 Ogos, termasuk papan kekunci, tetikus dan pad tetikus, yang direka dengan tema tersuai bagi siri Lani/Faded One produk Ia telah diletakkan di JD.com, berharga dari 99 yuan. Maklumat produk baharu jenama bersama yang dilampirkan pada tapak ini adalah seperti berikut: Papan Kekunci VGN丨Elden Law Ring S99PRO Papan kekunci ini menggunakan cangkerang aloi aluminium tulen, ditambah dengan struktur penyenyap lima lapisan, menggunakan struktur spring daun GASKET, mempunyai satu PCB berslot kunci, dan bahan PBT tinggi asal, satah belakang diperibadikan aloi aluminium menyokong sambungan tiga mod dan teknologi kependaman rendah SMARTSPEEDX, ia boleh menguruskan berbilang peranti dalam satu hentian, bermula pada 549 yuan; VGN丨Elden French Ring F1PROMAX tetikus wayarles tetikus
Apakah maksud pemegang tempat dalam vue
May 07, 2024 am 09:57 AM
Dalam Vue.js, atribut pemegang tempat menentukan teks pemegang tempat bagi elemen input, yang dipaparkan apabila pengguna belum memasukkan kandungan, menyediakan petua atau contoh input dan meningkatkan kebolehcapaian borang. Penggunaannya adalah untuk menetapkan atribut pemegang tempat pada elemen input dan menyesuaikan penampilan menggunakan CSS. Amalan terbaik termasuk relevan dengan input, pendek dan jelas, mengelakkan teks lalai dan mempertimbangkan kebolehaksesan.
Apakah maksud span dalam js
May 06, 2024 am 11:42 AM
Teg span boleh menambah gaya, atribut atau gelagat pada teks Ia digunakan untuk: menambah gaya, seperti warna dan saiz fon. Tetapkan atribut seperti id, kelas, dsb. Tingkah laku yang berkaitan seperti klik, tuding, dsb. Tandakan teks untuk pemprosesan atau petikan selanjutnya.
Apakah nod dalam js
May 07, 2024 pm 09:06 PM
Nod ialah entiti dalam DOM JavaScript yang mewakili elemen HTML. Ia mewakili elemen tertentu dalam halaman dan boleh digunakan untuk mengakses dan memanipulasi elemen tersebut. Jenis nod biasa termasuk nod elemen, nod teks, nod ulasan dan nod dokumen. Melalui kaedah DOM seperti getElementById(), anda boleh mengakses nod dan mengendalikannya, termasuk mengubah suai sifat, menambah/mengalih keluar nod anak, memasukkan/menggantikan nod dan nod pengklonan. Traversal nod membantu menavigasi dalam struktur DOM. Nod berguna untuk mencipta kandungan halaman, pengendalian acara, animasi dan pengikatan data secara dinamik.
Dalam bahasa apakah pemalam penyemak imbas ditulis?
May 08, 2024 pm 09:36 PM
Pemalam penyemak imbas biasanya ditulis dalam bahasa berikut: Bahasa bahagian hadapan: JavaScript, HTML, CSS Bahasa bahagian belakang: C++, Rust, WebAssembly Bahasa lain: Python, Java
Tetikus permainan Xuanpai Xuanpanda P1 melancarkan warna 'Macho Pink': berharga 139 yuan, versi kilat bintang sedang dalam persediaan
May 08, 2024 pm 09:10 PM
Menurut berita dari laman web ini pada 8 Mei, tetikus permainan Xuanpai Xuanpanda P1 telah melancarkan skema warna "Macho Pink" baharu Ia menggunakan sensor PAW3395 asal dan reka bentuk ringan 60g, berharga 139 yuan. Tetikus Black Panda P1 dilengkapi dengan penderia PAW3395 asal, mempunyai pecutan 26000DPI dan 50G, kelajuan pengesanan 650IPS, dan dilengkapi dengan suis mikro Kaihua Black Mamba dengan hayat perkhidmatan 80 juta kali. Tetikus dilengkapi dengan kawalan utama BK Shanghai Broadcom CX52850P, menyokong kadar pulangan 1000Hz, mempunyai kapasiti bateri 500mAh, dan boleh bertahan sehingga 135 jam dengan cas penuh. Tetikus Black Panda P1 ialah reka bentuk ergonomik tangan kanan standard dengan ukuran 122.95*65.09*40.98mm, sesuai untuk pemain dengan tangan sederhana hingga besar yang menyokong 2.
Bagaimana untuk menetapkan atribut yang tidak diketahui dalam kaedah vscode vscode untuk menetapkan atribut yang tidak diketahui
May 09, 2024 pm 02:43 PM
1. Mula-mula, buka ikon tetapan di sudut kiri bawah dan klik pilihan tetapan 2. Kemudian, cari lajur CSS dalam tetingkap lompat .
