zoukankan      html  css  js  c++  java
  • 网页动态背景——随鼠标变换的动态线条

    先上一张效果图。

    代码如下:

    <script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>  
     1 /**
     2  * Copyright (c) 2016 hustcc
     3  * License: MIT
     4  * Version: v1.0.1
     5  * GitHub: https://github.com/hustcc/canvas-nest.js
     6 **/
     7 !
     8 function() {
     9     function n(n, e, t) {
    10         return n.getAttribute(e) || t
    11     }
    12     function e(n) {
    13         return document.getElementsByTagName(n)
    14     }
    15     function t() {
    16         var t = e("script"),
    17         o = t.length,
    18         i = t[o - 1];
    19         return {
    20             l: o,
    21             z: n(i, "zIndex", -1),
    22             o: n(i, "opacity", .5),
    23             c: n(i, "color", "0,0,0"),
    24             n: n(i, "count", 99)
    25         }
    26     }
    27     function o() {
    28         a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    29         c = m.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    30     }
    31     function i() {
    32         r.clearRect(0, 0, a, c);
    33         var n, e, t, o, m, l;
    34         s.forEach(function(i, x) {
    35             for (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 = u[e],
    36             null !== n.x && null !== n.y && (o = i.x - n.x, m = i.y - n.y, l = o * o + m * m, l < n.max && (n === y && l >= n.max / 2 && (i.x -= .03 * o, i.y -= .03 * m), t = (n.max - l) / n.max, r.beginPath(), r.lineWidth = t / 2, r.strokeStyle = "rgba(" + d.c + "," + (t + .2) + ")", r.moveTo(i.x, i.y), r.lineTo(n.x, n.y), r.stroke()))
    37         }),
    38         x(i)
    39     }
    40     var a, c, u, m = document.createElement("canvas"),
    41     d = t(),
    42     l = "c_n" + d.l,
    43     r = m.getContext("2d"),
    44     x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    45     function(n) {
    46         window.setTimeout(n, 1e3 / 45)
    47     },
    48     w = Math.random,
    49     y = {
    50         x: null,
    51         y: null,
    52         max: 2e4
    53     };
    54     m.id = l,
    55     m.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o,
    56     e("body")[0].appendChild(m),
    57     o(),
    58     window.onresize = o,
    59     window.onmousemove = function(n) {
    60         n = n || window.event,
    61         y.x = n.clientX,
    62         y.y = n.clientY
    63     },
    64     window.onmouseout = function() {
    65         y.x = null,
    66         y.y = null
    67     };
    68     for (var s = [], f = 0; d.n > f; f++) {
    69         var h = w() * a,
    70         g = w() * c,
    71         v = 2 * w() - 1,
    72         p = 2 * w() - 1;
    73         s.push({
    74             x: h,
    75             y: g,
    76             xa: v,
    77             ya: p,
    78             max: 6e3
    79         })
    80     }
    81     u = s.concat([y]),
    82     setTimeout(function() {
    83         i()
    84     },
    85     100)
    86 } ();

    第一是直接引入方式,第二可以直接拷贝到JS文件里面。

    作者的GitHub地址是https://github.com/hustcc/canvas-nest.js

  • 相关阅读:
    Linnia学习记录
    漫漫考研路
    ENS的学习记录
    KnockoutJS 3.X API 第四章 数据绑定(4) 控制流with绑定
    KnockoutJS 3.X API 第四章 数据绑定(3) 控制流if绑定和ifnot绑定
    KnockoutJS 3.X API 第四章 数据绑定(2) 控制流foreach绑定
    KnockoutJS 3.X API 第四章 数据绑定(1) 文本及样式绑定
    KnockoutJS 3.X API 第三章 计算监控属性(5) 参考手册
    KnockoutJS 3.X API 第三章 计算监控属性(4)Pure computed observables
    KnockoutJS 3.X API 第三章 计算监控属性(3) KO如何实现依赖追踪
  • 原文地址:https://www.cnblogs.com/qq597585136/p/7019755.html
Copyright © 2011-2022 走看看