Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > JQuery und HTML+CSS implementieren einen Mausklick, um ein Feuerwerk auszulösen

JQuery und HTML+CSS implementieren einen Mausklick, um ein Feuerwerk auszulösen

PHP中文网
Freigeben： 2017-06-20 09:36:00
Original
1558 Leute haben es durchsucht
<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!

Verwandte Etiketten：
css html+css jquery 实现 点击 鼠标
Quelle：php.cn
Vorheriger Artikel：So verwenden Sie die JavaScript-Ereignisbindung Nächster Artikel：Javascript-Motion-Framework-Code
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
Aus 2024-04-16 10:10:18
0
0
1335
Automatische PX-Konvertierung in REM-Fehler  <style>html {  font-size: calc(100vw / 3.75);      }body {    Schriftgröße: 0,16rem...
Aus 2024-04-16 09:34:16
0
0
4687
Die Seite kann plötzlich weder CSS noch Bootstrap abrufen Ich entwickle also eine Seite, einen Teil davon habe ich gestern gemacht und es hat großar...
Aus 2024-04-06 21:58:04
0
1
800
Ändern Sie Inline-CSS-Stile in Javafx dynamisch Ich versuche, das Hintergrundbild eines Bereichs zu ändern, wenn die Anwendung maximiert i...
Aus 2024-04-06 20:57:16
0
1
487
Wie kann man schwebende Elemente in CSS vertikal statt horizontal stapeln lassen? Ich versuche, eine Webseite mit zwei Spalten zu erstellen, mit Hauptinhalt auf der einen S...
Aus 2024-04-06 20:45:26
0
2
386
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage