JS打造的跟随鼠标移动的酷炫拓扑图案

最新推荐文章于 2024-05-02 18:12:22 发布

weixin_33860147

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量123

点赞数

文章标签： xhtml javascript python ViewUI

原文链接：http://www.cnblogs.com/Man-Dream-Necessary/p/4860175.html

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>JS打造的跟随鼠标移动的酷炫拓图案</title>
    <meta http-equiv="content-type" content="text/html;charset=gb2312">
    <style type="text/css">
        html {
            overflow: hidden;
        }

        body {
            position: absolute;
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        #screen {
            background: #000;
            position: absolute;
            width: 100%;
            height: 100%;
        }

        #screen span {
            background: #fff;
            font-size: 0;
            overflow: hidden;
            width: 2px;
            height: 2px;
        }
    </style>
    <script type="text/javascript">
        var Follow = function () {
            var $ = function (i) {
                    return document.getElementById(i)
                },
                addEvent = function (o, e, f) {
                    o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent

                    ('on' + e, function () {
                        f.call(o)
                    })
                },
                OBJ = [],
                sp, rs, N = 0,
                m;
            var init = function (id, config) {
                this.config = config || {};
                this.obj = (id);
                sp = this.config.speed || 4;
                rs = this.config.animR || 1;
                m = {x: (id).offsetWidth * .5, y: $(id).offsetHeight * .5};
                this.setXY();
                this.start();
            }
            init.prototype = {
                setXY: function () {
                    var _this = this;
                    addEvent(this.obj, 'mousemove', function (e) {
                        e = e || window.event;
                        m.x = e.clientX;
                        m.y = e.clientY;
                    })
                },
                start: function () {
                    var k = 180 / Math.PI,
                        OO, o, _this = this,
                        fn = this.config.fn;
                    OBJ[N++] = OO = new CObj(null, 0, 0);
                    for (var i = 0; i < 360; i += 20) {
                        var O = OO;
                        for (var j = 10; j < 35; j += 1) {
                            var x = fn(i, j).x,
                                y = fn(i, j).y;
                            OBJ[N++] = o = new CObj(O, x, y);
                            O = o;
                        }
                    }
                    setInterval(function () {
                        for (var i = 0; i < N; i++) OBJ[i].run();
                    }, 16);
                }
            }
            var CObj = function (p, cx, cy) {
                var obj = document.createElement("span");
                this.css = obj.style;
                this.css.position = "absolute";
                this.css.left = "-1000px";
                this.css.zIndex = 1000 - N;
                document.getElementById("screen").appendChild(obj);
                this.ddx = 0;
                this.ddy = 0;
                this.PX = 0;
                this.PY = 0;
                this.x = 0;
                this.y = 0;
                this.x0 = 0;
                this.y0 = 0;
                this.cx = cx;
                this.cy = cy;
                this.parent = p;
            }
            CObj.prototype.run = function () {
                if (!this.parent) {
                    this.x0 = m.x;
                    this.y0 = m.y;
                } else {
                    this.x0 = this.parent.x;
                    this.y0 = this.parent.y;
                }
                this.x = this.PX += (this.ddx += ((this.x0 - this.PX - this.ddx) + this.cx) / rs) / sp;
                this.y = this.PY += (this.ddy += ((this.y0 - this.PY - this.ddy) + this.cy) / rs) / sp;
                this.css.left = Math.round(this.x) + 'px';
                this.css.top = Math.round(this.y) + 'px';
            }
            return init;
        }();
    </script>
</head>

<body>
<div id="screen"></div>
<script type="text/javascript">
    new Follow('screen', {
        speed: 4,
        animR: 2,
        fn: function (i, j) {
            return {
                x: j / 4 * Math.cos(i),
                y: j / 4 * Math.sin(i)
            }
        }
    })
</script>
</body>

</html>

转载于:https://www.cnblogs.com/Man-Dream-Necessary/p/4860175.html

weixin_33860147

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS打造的跟随鼠标移动的酷炫拓扑图案

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> &...
复制链接

扫一扫