더 마우스 효과 JS 거미 웹

 

코드

1 <script>
 이    !
3    함수 () {
 4        함수 N (N, E, t) {
 5            창 n.getAttribute (E) || t
 6        }
 7        함수 E (n)은 {
 8            창 document.getElementsByTagName (N)
 9        }
 10        함수 t () {
 11            VAR의 t = E ( "스크립트" ),
 12            O = t.length,
 13            난 t [0을 = - 1 ];
14            창 {
 15                L : O,
 16               Z : N (I "Z- 색인"-1 ),
 17                O : N (I "불투명", 0.9),    // 透明度
18                C : N (I, "컬러", "255, 102, 153" )    // 颜色
19                N : N (전, 99 "카운트" )
 20            }
 21        }
 22        함수 O () {
 23            A = m.width window.innerWidth = || document.documentElement.clientWidth || document.body.clientWidth,
 24            C = m.height window.innerHeight = || document.documentElement.clientHeight || document.body.clientHeight
 25        }
 (26)       함수 I () {
 27            r.clearRect (0, 0 , A, C);
28            VAR N, E, T, O, m, L;
29            s.forEach ( 함수 (I, X) {
 30                대 (IX + = i.xa, IY + = i.ya, i.xa * = IX>를 IX || <0-1 : 1, I. ? 나중에 * = IY> C IY || <0-1 : 1, r.fillRect (IX - 0.5, IY - 0.5, 1, 1), E = X + 1, E <u.length; E ++) N = U [E],
 (31)                는 null == NX &&! 널 == NY && (O = IX! - NX, m = IY - NY, L = O + O * m * m, L <n.max && ( === && N Y L> = n.max / 2 && (IX - 0.03 * = O, IY - * = 0.03 m), t = (n.max - L) / n.max, r.beginPath () r.lineWidth = t / 2 = r.strokeStyle "RGBA (", r.moveTo (IX, IY) r.lineTo (NX, NY), r.stroke ()))
 32            }),
 (33)            X (I)
 34        }
 35        VAR의 A, C, U, m = document.createElement ( "캔버스" ),
 36        (D) = t (),
 37        , L = "c_n"+ DL,
 38        , R = m.getContext ( "2D" )
 39        X = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
40        함수 (N) {
 41            window.setTimeout (N / 45 1e3 )
 42       }
 43        W = 인 Math.random,
 44        , Y = {
 45            X : 널 ,
 46            Y : 널 ,
 47            최대 : 2e4
 48        };
49        m.id = L,
 50        m.style.cssText = "총수 : 고정, 상단 : 0] 왼쪽 : 0] Z- 색인"+ + DZ "; 불투명도"+ 수행
 51        E ( '신체') [0 ] .appendChild (m)
 52        O (),
 53        window.onresize = O,
 54        window.onmousemove = 함수 (N) {
 55           N = N || window.event를,
 56            YX = n.clientX,
 57            YY = n.clientY
 58        }
 59        window.onmouseout = 함수 () {
 60            YX = 널 ,
 61            YY = 널 
62        };
63        대 ( VAR S = [], F = 0; DN> F, F ++ ) {
 64            VAR의 H = w () * A,
 65            G = () * w (C),
 66            () w V = 2 * - 1 ,
 67           p = 2 * w () - 1 ;
68            s.push ({
 69                X : H,
 70                Y : g,
 71                XA : V,
 72                나중에 : P는,
 (73)                최대 : 6e3
 74            })
 (75)        }
 (76)        U = s.concat ([Y]),
 (77)        의 setTimeout ( 함수 () {
 78            I ()
 79        }
 80        100 )
 81    } ();
82    </ script>

코드보기