마우스 선형 이동 효과
1
2
3
4
5
6
7 HelloWord!
8
<span style="color: #008080;"> 9</span>
<span style="color: #008080;">10</span> !<span style="color: #000000;">function () {
</span><span style="color: #008080;">11</span>
<span style="color: #008080;">12</span> <span style="color: #000000;"> function n(n, e, t) {
</span><span style="color: #008080;">13</span>
<span style="color: #008080;">14</span> <span style="color: #0000ff;">return</span> n.getAttribute(e) ||<span style="color: #000000;"> t
</span><span style="color: #008080;">15</span>
<span style="color: #008080;">16</span> <span style="color: #000000;"> }
</span><span style="color: #008080;">17</span>
<span style="color: #008080;">18</span> <span style="color: #000000;"> function e(n) {
</span><span style="color: #008080;">19</span>
<span style="color: #008080;">20</span> <span style="color: #0000ff;">return</span><span style="color: #000000;"> document.getElementsByTagName(n)
</span><span style="color: #008080;">21</span>
<span style="color: #008080;">22</span> <span style="color: #000000;"> }
</span><span style="color: #008080;">23</span>
<span style="color: #008080;">24</span> <span style="color: #000000;"> function t() {
</span><span style="color: #008080;">25</span>
<span style="color: #008080;">26</span> var t = e("script"), o = t.length, i = t[o - 1<span style="color: #000000;">];
</span><span style="color: #008080;">27</span>
<span style="color: #008080;">28</span> <span style="color: #0000ff;">return</span><span style="color: #000000;"> {
</span><span style="color: #008080;">29</span>
<span style="color: #008080;">30</span> l: o, z: n(i, "zIndex", -1), o: n(i, "opacity", .5), c: n(i, "color", "0,0,0"), n: n(i, "count", 99<span style="color: #000000;">)
</span><span style="color: #008080;">31</span> <span style="color: #000000;"> }
</span><span style="color: #008080;">32</span> <span style="color: #000000;"> }
</span><span style="color: #008080;">33</span>
<span style="color: #008080;">34</span> <span style="color: #000000;"> function o() {
</span><span style="color: #008080;">35</span> a = m.width = window.innerWidth || document.documentElement.clientWidth ||<span style="color: #000000;"> document.body.clientWidth,
</span><span style="color: #008080;">36</span> 34
<span style="color: #008080;">37</span> c = m.height = window.innerHeight || document.documentElement.clientHeight ||<span style="color: #000000;"> document.body.clientHeight
</span><span style="color: #008080;">38</span> <span style="color: #000000;"> }
</span><span style="color: #008080;">39</span>
<span style="color: #008080;">40</span> <span style="color: #000000;"> function i() {
</span><span style="color: #008080;">41</span> r.clearRect(0, 0<span style="color: #000000;">, a, c);
</span><span style="color: #008080;">42</span>
<span style="color: #008080;">43</span> <span style="color: #000000;"> var n, e, t, o, m, l;
</span><span style="color: #008080;">44</span> <span style="color: #000000;"> s.forEach(function (i, x) {
</span><span style="color: #008080;">45</span>
<span style="color: #008080;">46</span> <span style="color: #0000ff;">for</span> (i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x < 0 ? -1 : 1, i.ya *= i.y > c || i.y < 0 ? -1 : 1, r.fillRect(i.x - .5, i.y - .5, 1, 1), e = x + 1; e < u.length; e++) n =<span style="color: #000000;"> u[e],
</span><span style="color: #008080;">47</span>
<span style="color: #008080;">48</span> <span style="color: #0000ff;">null</span> !== n.x && <span style="color: #0000ff;">null</span> !== n.y && (o = i.x - n.x, m = i.y -<span style="color: #000000;"> n.y,
</span><span style="color: #008080;">49</span> l = o * o + m * m, l < n.max && (n === y && l >= n.max / 2 && (i.x -= .03 * o, i.y -= .03 *<span style="color: #000000;"> m),
</span><span style="color: #008080;">50</span> t = (n.max - l) / n.max, r.beginPath(), r.lineWidth = t / 2, r.strokeStyle = "rgba(" + d.c + "," + (t + .2) + ")"<span style="color: #000000;">, r.moveTo(i.x, i.y), r.lineTo(n.x, n.y), r.stroke()))
</span><span style="color: #008080;">51</span> <span style="color: #000000;"> }),
</span><span style="color: #008080;">52</span> <span style="color: #000000;"> x(i)
</span><span style="color: #008080;">53</span> <span style="color: #000000;"> }
</span><span style="color: #008080;">54</span>
<span style="color: #008080;">55</span> var a, c, u, m = document.createElement("canvas"<span style="color: #000000;">),
</span><span style="color: #008080;">56</span> d = t(), l = "c_n" + d.l, r = m.getContext("2d"<span style="color: #000000;">),
</span><span style="color: #008080;">57</span> x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
<span style="color: #008080;">58</span> <span style="color: #000000;"> function (n) {
</span><span style="color: #008080;">59</span> window.setTimeout(n, 1e3 / 45<span style="color: #000000;">)
</span><span style="color: #008080;">60</span> <span style="color: #000000;"> },
</span><span style="color: #008080;">61</span> w = Math.random, y = {x: <span style="color: #0000ff;">null</span>, y: <span style="color: #0000ff;">null</span><span style="color: #000000;">, max: 2e4};
</span><span style="color: #008080;">62</span> m.id = l, m.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o, e("body")[0].appendChild(m), o(), window.onresize =<span style="color: #000000;"> o,
</span><span style="color: #008080;">63</span> window.onmousemove =<span style="color: #000000;"> function (n) {
</span><span style="color: #008080;">64</span> n = n || window.event, y.x = n.clientX, y.y =<span style="color: #000000;"> n.clientY
</span><span style="color: #008080;">65</span> <span style="color: #000000;"> },
</span><span style="color: #008080;">66</span> window.onmouseout =<span style="color: #000000;"> function () {
</span><span style="color: #008080;">67</span> y.x = <span style="color: #0000ff;">null</span>, y.y = <span style="color: #0000ff;">null</span>
<span style="color: #008080;">68</span> <span style="color: #000000;"> };
</span><span style="color: #008080;">69</span> <span style="color: #0000ff;">for</span> (var s = [], f = 0; d.n > f; f++<span style="color: #000000;">) {
</span><span style="color: #008080;">70</span> var h = w() * a, g = w() * c, v = 2 * w() - 1, p = 2 * w() - 1<span style="color: #000000;">;
</span><span style="color: #008080;">71</span> <span style="color: #000000;"> s.push({x: h, y: g, xa: v, ya: p, max: 6e3})
</span><span style="color: #008080;">72</span> <span style="color: #000000;"> }
</span><span style="color: #008080;">73</span> u =<span style="color: #000000;"> s.concat([y]),
</span><span style="color: #008080;">74</span> <span style="color: #000000;"> setTimeout(function () {
</span><span style="color: #008080;">75</span> <span style="color: #000000;"> i()
</span><span style="color: #008080;">76</span> }, 100<span style="color: #000000;">)
</span><span style="color: #008080;">77</span> <span style="color: #000000;"> }();
</span><span style="color: #008080;">78</span>
79
80
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.