master

分支 (1)

管理

管理

master

mouse-follow
/
index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<style type="text/css">
			html,
			body {
				background-color: transparent;
			}

			.element {
				position: fixed;
				top: 0;
				left: 0;
				display: block;
				background-color: transparent;
				background-image: url("data:image/png;base64,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");
				background-size: 100%;
			}
		</style>
		<script type="text/javascript">
            function Point(x, y) {
                this.x = x;
                this.y = y;
            }

            function ElementPoint(x, y) {
                this.x = x;
                this.y = y;
                this.el = null;
                this.render = function () {
                    if (!this.el) {
                        this.el = document.createElement("span");
                        this.el.setAttribute("style", "width: " + elementSize + "px; height: " + elementSize + "px;");
                        this.el.setAttribute("class", "element");
                        document.body.appendChild(this.el);
                    }
                    this.el.style.top = this.y + "px";
                    this.el.style.left = this.x + "px";
                };
                this.reset = function (x, y) {
                    this.x = x;
                    this.y = y;
                };
            }

            var elementSize = 24;
            var elmentArr = new Array(20);
            var historyArr = new Array(elmentArr.length);

            function loadFunc() {
                for (var i = 0; i < elmentArr.length; i++) {
                    elmentArr[i] = new ElementPoint(0, 0);
                    elmentArr[i].render();
                }
                resetHistory(0, 0);
                setInterval(actionLoop, 30);
            }

            function resetHistory(x, y) {
                for (let i = 0; i < historyArr.length; i++) {
                    historyArr[i] = new Point(x, y);
                }
            }

            function actionLoop() {
                for (var i = historyArr.length - 1; i > 0 ; i--) {
                    historyArr[i].x = historyArr[i - 1].x;
                    historyArr[i].y = historyArr[i - 1].y;
                    elmentArr[i].reset(historyArr[i - 1].x, historyArr[i - 1].y);
                    elmentArr[i].render();
                }
                if (historyArr[0].x == historyArr[historyArr.length -1].x && historyArr[0].y == historyArr[historyArr.length -1].y) {
                    resetHistory(elmentArr[0].x, elmentArr[0].y);
                }
            }

            function mouseMoveAction(e) {
                var x = e.clientX + 10;
                var y = e.clientY + 10;
                elmentArr[0].reset(x, y);
                elmentArr[0].render();

                var dis = calculateDistance(x, y, historyArr[0].x, historyArr[0].y);
                if (dis > elementSize) {
                    var mDis = dis % elementSize || elementSize;
                    var middlePoint = calculatePosition(x, y, historyArr[0].x, historyArr[0].y, mDis, dis);
                    var currentPoint = historyArr[0];
                    historyArr[0] = middlePoint;
                    dis = dis - mDis;
                    var count = parseInt(dis / elementSize);
                    if (count > historyArr.length - 1) {
                        count = historyArr.length - 1;
                    }
                    for (var i = elmentArr.length - 1; i > count; i--) {
						historyArr[i] = historyArr[i - count];
                    }
                    for (var i = 1; i <= count; i++) {
                        historyArr[i] = middlePoint = calculatePosition(middlePoint.x, middlePoint.y, currentPoint.x, currentPoint.y, elementSize, dis - ((i - 1) * elementSize));
                    }
                }

                for (var i = 1; i < historyArr.length; i++) {
                    elmentArr[i].reset(historyArr[i - 1].x, historyArr[i - 1].y);
                    elmentArr[i].render();
                }

            }

            //求两点距离
            function calculateDistance(x, y, x1, y1) {
                return Math.sqrt(Math.pow(x - x1, 2) + Math.pow(y - y1, 2));
            }

            //已知距离和两点坐标，求另一点坐标
            function calculatePosition(x, y, x1, y1, d, r) {
                var cy = (d * (y1 - y)) / r + y;
                var cx = (d * (x1 - x)) / r + x;
                return new Point(cx, cy);
            }

            window.addEventListener("load", loadFunc, false);
            window.addEventListener("mousemove", mouseMoveAction, false);
		</script>
	</head>
	<body>
	</body>
</html>