2种网页蜘蛛网动态代码


现在很多人都在搞前端,页面背景也是各种高大上,炫酷无比,其中有一种像下方图像的,非常酷的动态蜘蛛网,会随机连接,也能跟着鼠标动,下面就分享两种实现动态蜘蛛网代码,安装到网站上试试效果哦!

第一种JS代码实现

! function() {
    //封装方法,压缩之后减少文件大小
    function get_attribute(node, attr, default_value) {
    return node.getAttribute(attr) || default_value;
    }
    //封装方法,压缩之后减少文件大小
    function get_by_tagname(name) {
    return document.getElementsByTagName(name);
    }
    //获取配置参数
    function get_config_option() {
    var scripts = get_by_tagname("script"),
    script_len = scripts.length,
    script = scripts[script_len - 1]; //当前加载的script
    return {
    l: script_len, //长度,用于生成id用
    z: get_attribute(script, "zIndex", -1), //z-index
    o: get_attribute(script, "opacity", 0.5), //opacity
    c: get_attribute(script, "color", "0,0,0"), //color
    n: get_attribute(script, "count", 99) //count
    };
    }
    //设置canvas的高宽
    function set_canvas_size() {
    canvas_width = the_canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, 
    canvas_height = the_canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    }
    
    //绘制过程
    function draw_canvas() {
    context.clearRect(0, 0, canvas_width, canvas_height);
    //随机的线条和当前位置联合数组
    var e, i, d, x_dist, y_dist, dist; //临时节点
    //遍历处理每一个点
    random_lines.forEach(function(r, idx) {
    r.x += r.xa, 
    r.y += r.ya, //移动
    r.xa *= r.x > canvas_width || r.x < 0 ? -1 : 1, 
    r.ya *= r.y > canvas_height || r.y < 0 ? -1 : 1, //碰到边界,反向反弹
    context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); //绘制一个宽高为1的点
    //从下一个点开始
    for (i = idx + 1; i < all_array.length; i++) {
    e = all_array[i];
    //不是当前点
    if (null !== e.x && null !== e.y) {
    x_dist = r.x - e.x, //x轴距离 l
    y_dist = r.y - e.y, //y轴距离 n
    dist = x_dist * x_dist + y_dist * y_dist; //总距离, m
    dist < e.max && (e === current_point && dist >= e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.03 * y_dist), //靠近的时候加速
    d = (e.max - dist) / e.max, 
    context.beginPath(), 
    context.lineWidth = d / 2, 
    context.strokeStyle = "rgba(" + config.c + "," + (d + 0.2) + ")", 
    context.moveTo(r.x, r.y), 
    context.lineTo(e.x, e.y), 
    context.stroke());
    }
    }
    }), frame_func(draw_canvas);
    }
    //创建画布,并添加到body中
    var the_canvas = document.createElement("canvas"), //画布
    config = get_config_option(), //配置
    canvas_id = "c_n" + config.l, //canvas id
    context = the_canvas.getContext("2d"), canvas_width, canvas_height, 
    frame_func = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(func) {
    window.setTimeout(func, 1000 / 45);
    }, random = Math.random, 
    current_point = {
    x: null, //当前鼠标x
    y: null, //当前鼠标y
    max: 20000
    },
    all_array;
    the_canvas.id = canvas_id;
    the_canvas.style.cssText = "position:fixed;top:0;left:0;z-index:" + config.z + ";opacity:" + config.o;
    get_by_tagname("body")[0].appendChild(the_canvas);
    //初始化画布大小
    
    set_canvas_size(), window.onresize = set_canvas_size;
    //当时鼠标位置存储,离开的时候,释放当前位置信息
    window.onmousemove = function(e) {
    e = e || window.event, current_point.x = e.clientX, current_point.y = e.clientY;
    }, window.onmouseout = function() {
    current_point.x = null, current_point.y = null;
    };
    //随机生成config.n条线位置信息
    for (var random_lines = [], i = 0; config.n > i; i++) {
    var x = random() * canvas_width, //随机位置
    y = random() * canvas_height,
    xa = 2 * random() - 1, //随机运动方向
    ya = 2 * random() - 1;
    random_lines.push({
    x: x,
    y: y,
    xa: xa,
    ya: ya,
    max: 6000 //沾附距离
    });
    }
    all_array = random_lines.concat([current_point]);
    //0.1秒后绘制
    setTimeout(function() {
    draw_canvas();
    }, 100);
    }();</pre>

第二种HTML代码实现

function async_load() {

i.scrolling = &quot;no&quot;;
i.frameborder = &quot;0&quot;;
i.border = &quot;0&quot;;
i.setAttribute(&quot;frameborder&quot;, &quot;0&quot;, 0);
i.width = &quot;100px&quot;;
i.height = &quot;20px&quot;;
document.getElementById(&quot;hub_iframe&quot;).appendChild(i);
}

if (window.addEventListener) {window.addEventListener(&quot;load&quot;, async_load, false);}
else if (window.attachEvent) {window.attachEvent(&quot;onload&quot;, async_load);}
else {window.onload = async_load;}
&lt;/script&gt;</pre>

示例样式

!function() {
            function A(a, b, c) {
                return a.getAttribute(b) || c
            }
            function F(a) {
                return document.getElementsByTagName(a);
            }
            function D() {
                var c = F(&quot;script&quot;),
                    a = c.length,
                    b = c[a - 1];
                return {
                    l: a,
                    z: A(b, &quot;zIndex&quot;, -1),
                    o: A(b, &quot;opacity&quot;, 0.5),
                    c: A(b, &quot;color&quot;, &quot;0,0,0&quot;),
                    n: A(b, &quot;count&quot;, 199)
                }
            }
            function E() {
                x = i.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
                B = i.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            }
            function M() {
                J.clearRect(0, 0, x, B);
                var c = [I].concat(v);
                var b, d, a, g, e, f;
                v.forEach(function(h) {
                    h.x += h.xa,
                        h.y += h.ya,
                        h.xa *= h.x &gt; x || h.x &lt; 0 ? -1 : 1,
                        h.ya *= h.y &gt; B || h.y &lt; 0 ? -1 : 1,
                        J.fillRect(h.x - 0.5, h.y - 0.5, 1, 1);
                    for (d = 0; d &lt; c.length; d++) {
                        b = c[d];
                        if (h !== b &amp;&amp; null !== b.x &amp;&amp; null !== b.y) {
                            g = h.x - b.x;
                            e = h.y - b.y;
                            f = g * g + e * e;
                            f &lt; b.max &amp;&amp; (b === I &amp;&amp; f &gt;= b.max / 2 &amp;&amp; (h.x -= 0.03 * g, h.y -= 0.03 * e), a = (b.max - f) / b.max, J.beginPath(), J.lineWidth = a / 2, J.strokeStyle = &quot;rgba(&quot; + w.c + &quot;,&quot; + (a + 0.2) + &quot;)&quot;, J.moveTo(h.x, h.y), J.lineTo(b.x, b.y), J.stroke())
                        }
                    }
                    c.splice(c.indexOf(h), 1);
                }),
                    C(M);
            }
            var i = document.createElement(&quot;canvas&quot;),
                w = D(),
                L = &quot;c_n&quot; + w.l, //c_n2
                J = i.getContext(&quot;2d&quot;),
                x,
                B,
                C = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
                    function(a) {
                        window.setTimeout(a, 1000 / 45)
                    },
                N = Math.random,
                I = {
                    x: null,
                    y: null,
                    max: 20000
                };
            i.id = L;
            i.style.cssText = &quot;position:fixed;top:0;left:0;z-index:&quot; + w.z + &quot;;opacity:&quot; + w.o;
            F(&quot;body&quot;)[0].appendChild(i);
            E();
            window.onresize = E;
            window.onmousemove = function(a) {
                a = a || window.event,
                    I.x = a.clientX,
                    I.y = a.clientY
            };
            window.onmouseout = function() {
                I.x = null,
                    I.y = null
            };
            for (var v = [], z = 0; w.n &gt; z; z++) {
                var G = N() * x,
                    H = N() * B,
                    y = 2 * N() - 1,
                    K = 2 * N() - 1;
                v.push({
                    x: G,
                    y: H,
                    xa: y,
                    ya: K,
                    max: 6000
                }); }
            setTimeout(function() {
                M()
            }, 100)
        } ();</pre>

调用方法

1.以Typecho博客为例,在博客主题模板中找到Footer.php文件
2.将以上代码放入<body>……</body>之间保存即可

声明:官仁有话说|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 2种网页蜘蛛网动态代码


从来没有这样去喜欢一个女孩子,即便她说现在或将来都不会喜欢我,而我也不会这样放弃 —— 2019 在成都遇见了她